Home »
Tutorial Blog
» Cara Membuat Efek Zoom Pada Gambar Jika Terkena Cursor
Posted by : Irvan Kadhafi
Thursday, March 1, 2012
Nah kali ini saya 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? Langsung.....
Steps :
1. Login ke blogmu, lalu pilih menu "Rancangan"" --> "Edit HTML", kemudian centang pada box "Expand Template Widget".
2. 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>.
2. 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}
4. 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="URL GAMBAR SOBAT" alt="" title="IMC-SYNDICATE" /> </div>
NB : Ganti tulisan yang berwarna biru dengan url gambar kalian.Semoga bermanfaat!!!!
Irvan Kadhafi™ BackLinks !!
URL |
Code For Forum |
HTML Code |
wah keren. . . .. . bisa dicoba nih. .. klo ndak eror lagi
ReplyDeleteGan, saya uda coba macem2 cara buat bikin efek zoom ini tapi ga ada yang berhasil..kira2 blog ane salah dimananya yah?
ReplyDeletenice info sob jangan lupa berkunjung balik diblog saya yach,,!!!!
ReplyDeletebagus sob,, absen,, di tunggu kunjangan balik,,
ReplyDelete