Cara Membuat Efek Zoom Gambar Saat Disentuh Cursor

Sore-sore gini, di hari sabtu yang indah ini, Saya mau share lagi kepada sahabat AYRIY ZONE. Bagi sobat yang suka menaruh gambar diblognya, mungkin sobat-sobat semua bosen melihat gambar yang seperti itu-itu saja, agar gambar sobat  terkesan lebih menarik untuk dilihat, sobat bisa mencoba trik yang satu ini yaitu Cara Membuat Efek Zoom Gambar Saat Disentuh Cursor.

Sebelum membuatnya lihat demo Disini

Oke tanpa banyak basa-basi lagi ikuti langkah-langkah berikut ini :

• Login ke Blogger
• Pilih rancangan --> Edit HTML --> Centang Expand.
• Kemudian letakkan CSS berikut diatas kode ]]></b:skin> 

.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;
}

• Kemudian Save Template.

Untuk memanggilnya anda bisa memberikan perintah berikut :

<div class="cayunhover">
<img src="URL GAMBAR SOBAT"/>
</div>

Ganti tulisan yang bercetak tebal dengan url gambar sobat, untuk peletakkannya sobat bisa letakkan di sidebar ataupun dipostingan,silahkan sobat kreasikan sendiri kode dan efek-efeknya.

Selamat Mencoba