Membuat Efek Zoom Poto Pada Blog

DEMO NENEK GAUL

Langsung Ke TKP
1. Login ke Blogger agan
2. Ke Rancangan lalu Edit HTML kemudian centang Expand Template Widget
3. Cari kode ]]></b:skin> lalu letakkan kode CSS di bawah ini tepat di atasnya.

.cayunhover img{
-webkit-transform:scale(0.3); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.3); /*Mozilla scale version*/
-o-transform:scale(0.3); /*Opera scale version*/
-webkit-transition-duration: 9.9s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.cayunhover img:hover{
-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.4); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px blue; /*Kode Css3 untuk efek shadow*/
-webkit-box-shadow:0px 0px 30px blue; /*Untuk safari*/
-moz-box-shadow:0px 0px 30px blue; /*Untuk Mozilla*/
opacity: 1;
}

• Save

Untuk Memanggil agan menggunakan kode perintah di bawah ini

<div class="cayunhover">
<img src="ULR GAMBAR ANDA"/>
</div>

Baca juga - Membuat Efek Getar Poto Pada Blog

Salam Olah raga.