Membuat Efek Zoom pada Gambar Bila dilalui Cursor

Halo sobat SYKC. Kali ini saya ingin berbagi tutorial blog bagaimana cara membuat gambar menjadi besar jika dilalui oleh kursor. Sebelumnya saya juga pernah memostingkan cara membuat efek zoom pada gambar dengan cara mengklik gambar tapi cara tersebut sudah tidak bisa lagi digunakan . Nah kali ini kita akan memakai cara baru yang dimana gambar akan menjadi besar otomatis apabila kursor diarahkan ke gambar dan akan mengecil kembali jika kursor menjauh dari gambar. Mau tau caranya? Cekidot Yuk...

Berikut Caranya:

• Login ke blogmu, lalu pilih menu "Rancangan"" --> "Edit HTML", kemudian centang pada box "Expand Template Widget".


• Carilah kode ]]></b:skin>, untuk mempersingkatnya gunakan fasilitas ctrl + f dan jika sudah ketemu, copy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>.

.hovergallery img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}.hovergallery img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}

Simpanlah template sobat.

Untuk memasukkan efeknya pada gambar maka copy-pastekan kode berikut pada postingan atau widget yang dimana sobat ingin menaruh gambar yang akan diberi efek. Berikut kodenya:

<div class="hovergallery"> <img src="http://i.imgur.com/IA3l9.jpg" alt="" title="Hosted by imgur.com" /> </div>

        SELESAI

Contohnya Ini:

Semoga bermanfaat bagi sobat blogger.....