Cara membuat efek zoom pada gambar post blog

Jika sobat ingin membuat efek zoom pada gambar postingan,
seperti gambar di atas(sorot mouse aja jika ingin lihat contohnya)
simak caranya:
1. Login blog
2. Rancangan
3. Edit html dan centang expand widget template
4. Letakkan kode berikut di atas ]]></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}
5. Simpan template

Kemudian dalam editor postingan letakkan kode berikut pada gambar

<div class="hovergallery"> URL GAMBAR  </div>
<div class="hovergallery"> <img src="http://dl4.glitter-graphics.net/pub/563/563974hf7kaxk18y.gif" width=90 height=90 border=0> </div>

Selanjutnya simpan postingan.

Mudah bukan cara membuat efek zoom pada gambar.
Selamat mencoba aja deh,
semoga tutornya bermanfat...
 
Top