Cara Membuat Bouncing Image CSS Hover

Dihari jumat sore yang indah ini saya mau share lagi sama sobat semua, yang akan saya bahas kali ini adalah Cara Membuat Bouncing Image CSS Hover di Blog, Lihat demo Disini,  oke langsung saja kita simak langkah-langkahnya sebagai berikut :

• Masuk Blogger - Rancangan - Edit HTML - centang Expand Widget Template.
• Kemudian letakkan kode berikut diatas kode ]]></b:skin>

img.hoverImages {
margin:20px;
padding:3px;
outline:2px solid #DDD;
border:#a1a1a1;
float:left;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
img.hoverImages:hover {
cursor:pointer;
margin-top: 2px;
}

• kemudian save template.

Untuk memasangnya dipostingan sobat cukup letakkan kode berikut kedalamnya :

<img class="hoverImages" src="URL IMAGE" />
<img class="hoverImages" src="URL IMAGE" />
<img class="hoverImages" src="URL IMAGE" />

silahkan ganti tulisan yang bercetak tebal dengan alamat penyimpanan gambar sobat, semoga ini bermanfaat bagi sobat semua.