کد افکت گذاری بر روی عکس های وبلاگ و سایت ... 15.از مستطیل كوچك به دایره بزرگ تبدیل شدن با رفتن ماوس
کد افکت گذاری بر روی عکس های وبلاگ و سایت ... 15.از مستطیل كوچك به دایره بزرگ تبدیل شدن با رفتن ماوس نحوه استفاده :
در صورتی که در انجام مراحل ذیل را برای خود مشکل می بیندید ؛ کد را در قسمت تنظیمات ، بخش کد های اضاقی یا اسکریپ ها وبلاگ خود کپی کنید .
1- به قسمت ویرایش قالب خود بروید و کد < head > یا < head /> را پیدا کنید
2- کد مورد نظر را بین این دو کپی کنید
| <style> img:hover{border-radius: 50px; opacity:0.8;filter:alpha(opacity=80); -webkit-transform:scale(1.1):( Webkit: Scale up image to 1.2x original size); -moz-border-radius:6px;-webkit-border-radius:30px; box-shadow: 10px 10px 5px #000; -moz-transform:scale(1.1):( Mozilla scale version); -moz-transform:scale(0.9):(Explorer scale version); } img:out{border-radius: 40px; opacity:1;filter:alpha(opacity=100); -webkit-transform:scale(0.9):( Webkit: Scale down image to 0.8x original size); padding:0px; float:center; -moz-transform:scale(0.9):(Mozilla scale version); -moz-transform:scale(0.9):(Explorer scale version); } img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style> |
