Efek Gambar Zoom Jika Dilalui Cursor

Halo sobat mampirbro. 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 (liat disini). 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 bro...


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"> URL GAMBAR SOBAT</div>




• Ganti teks berwarna merah dengan link dari gambar sobat. Contohnya seperti dibawah ini:




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




• SELESAI

Hasil Dari Efek Zoom Cursor

Semoga berguna dan bermamfaat...

Sumber:mampirbro.blogspot.com