CSS3 Hover Image for Blogger

Untuk memperbesar sebuah object (gambar) kita dapat menanamkan trik yang beraneka ragam (Ketikan keyword pada kolom search "ZOOM") Bagaimana jika trik memperbesar gambar ini menggunakan trik Hover. Dengan perkembangan browsingan sekarang yg support terhadap CSS3 memungkinkan kita bisa memperbesar gambar ketika cursor menyorot pada gambar tersebut :D Kabar dari web ternama Dynamic Drive membuat artikel mengenai CSS3 Hover Image Gallery :) Dengan kode² CSS3 ini kita akan berkreasi nih sob ;)

Keren kan sob :">

Kode CSS

Letakkan kode CSS diatas/sebelum kode ]]></b:skin>

.hoverimage img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*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*/
}
.hoverimage img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

Kode yg berwarna merah itu biasanya sudah ada pada bawaan template sobat masing² jadi kalau mau tidak dipakai jangan ditulis lagi (itu jarak antara image) Sobat juga bisa meletakan kode CSS3 tersebut itu pada tag post-body bagian (tag) image sobat!

Kode HTML

Kode ini dipakai dalam memostingnya sob ;) pada sesi menulis link syntax pada gambar :D

<div class="hoverimage">
<img style="cursor:pointer; cursor:hand;width: 205px; height: 92px;" src="http://4.bp.blogspot.com/_ALuJjudg6Rg/SriMX9T6FtI/AAAAAAAAAp8/JfVamkVFAX4/s320/BlahBlehBoh.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5384207697744369362" />
</div>

Tinggal memakai kode pemanggil yang diberi warna biru itu :)

Save

 Source & Demo