0 Gambar Terkena Cursor Dapat Membesar

gambar ane g kelihatan ketika di blog.alias tulisan pada keterangan gambar terlalu kecil.akhirnya ane gogling gmn caranya agar gambar ketika terkena cursor bisa membesar.
 
Yupz....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

Sumber : http://mampirbro.blogspot.com/2011/09/efek-gambar-zoom-jika-dilalui-cursor.html#ixzz27ieju5ck

Komentar →