Efect Zoom In dan Shadow Pada Gambar

Sebuah gambar atau foto akan tampak lebih menarik jika disekelilinga diberikan bingkai atau efek tertentu. Pada kali ini kita akan membahas cara pemberian efek shadow/bayangan pada gambar. Tidak hanya efek bayangan saja, tetapi juga efek zoom in. Yaitu efek membesar ketika kursor melintasi didepan gambar tersebut.

Untuk anda yang tertarik untuk membuat efek gambar ini silahkan ikuti langkah2 berikut:

1. Login pada dashboard blog anda
2. Pilih Template >  Edit HTML > Proceed.
3. Cari kode ]]></b:skin> 
4. Untuk mempermudah pencarian, blok kode ]]></b:skin>  kemudian pencet Ctrl + F dan paste kode ]]></b:skin> 
5. Letakkan kode dibawah ini persis diatas kode ]]></b:skin>
6.  Simpan template

.MBT-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.MBT-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
 

Untuk penggunaannya, anda dapat menempatkan kode dibawah ini pada halaman posting.

<div class="MBT-CSS3">
<img src="Tempat URL gambar anda" />
</div>

Pemanggilan efek menggunakan class="MBT-CSS3".
URL gambar adalah tempat dimana anda menyimpan file gambar anda di internet.
Silahkan lihat hasilnya.

Pada contoh gambar 1 (WEB Design), cara saya menuliskan kode sebagai berikut:

<div class="MBT-CSS3" style="text-align: center;">
<img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-VMeWrM2VVcidzaQWXx4GBsExUwOMy2hXpAQ7UOPuwuLF3T2bSv5AlolWkK3aYfgK6vsJkHfSSTKlxtlqTweAKcQl_bLG1gdESWQFHC5NSDN2pO3CNwmNVIPt_fdrTfAxuJRsl2KQUd1-/s1600/LOGO+Gw.jpg" title="webdesin" width="320" /></div>

Masih sangat banyak efek gambar yang bisa kita tampilkan pada blog.
Semoga bermanfaat.



Creative idea in this article : Ekman
Original Script : http://www.mybloggertricks.com
Special thanks to : http://www.blogger.com

Ranking: 5