Efek Zoom Gambar Saat Di Lalui Cursor

Hari ini saya Mau membahas Full tentang CSS ... kali ini saya mau membahas Efek Zoom Gambar Saat Di Cursor ,.. Pernahkah anda melihat sebuah blog seperti itu ??? jika pernah , apakah anda ingin seperti itu ?? always-sharing.com ga ingkar janji kok , cocok sama judul web nya ... :D ...yok berangkat ke step by step nya ...

Masuk ke EDIT HTML

Copas kode berikut di atas 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;
}

Klik Save.

Untuk tes panggilan.

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