Membuat Effect Hover Pada Gambar di Blog

Kali ini saya ingin berbagi mengenai mempercantik blog dengan effect. Effect tersebut setidaknya akan sedikit mempercantik blog anda.
Effect blog yang saya maksudkan adalah teknik hover gambar. Dimana gambar yang kita beri effect ini akan tampak memperbesar ketika mouse kita arahkan ke gambar itu. Langsung saja ke langkah-langkah pembuatannya:

• Pertama-tama login account blogger anda dulu di Blogger Homepage
• Lalu, masuk ke Design > Edit HTML dan cari kode ]]></b:skin>
• Copy script di bawah ini di atas kode ]]></b:skin> tadi:

ImgD{float:left;}.rad10R{float:right;}
.rad10C,.rad10C0{
float:none;display:block;margin:0 auto;
}
.ImgD:hover {
border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;
box-shadow:-2px -2px 8px #03b5ff, 2px 2px 20px #03b5ff;
-moz-box-shadow:-2px -2px 8px #03b5ff, 2px 2px 20px #03b5ff;
-webkit-box-shadow:-2px -2px 8px #03b5ff, 2px 2px 20px #03b5ff;
-o-transform:scale(1.4) translate(40px,40px) rotate(0deg);
-moz-transform:scale(1.4) translate(40px,40px) rotate(0deg);
-webkit-transform:scale(1.4) translate(40px,40px) rotate(0deg);
background:#555;-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-out;
-webkit-transition: all 1.2s ease-in;
}

• Kemudian Simpan Template

Cara memanggilnya masukkan Script di bawah ini di url gambar anda

<img class="ImgD" height="162" id="#" http://www.dracat.net/%7Ewyvern/graphics/DigitalMusik.jpg" style="height: 162px; width: 200px;" width="200" />

Demonya seperti gambar di bawah ini:

Demikian dari saya. Semoga bermanfaat. Trims....