Membuat transisi gambar gelembung dengan css html

Kali ini kita akan membuat transisi gambar menggembung seperti buih buih busa sabun cuci r*n*o.. Hehe..

Hasilnya dapat kamu terapkan pada semua gambar dalam blog kamu maupun hanyalah sebagai selir ratu..
Eh kok salah.. Ralat!
Maupun sebagai widget..

Untuk kode css nya nih dia :

<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-moz-transition:-moz-transform 0.1s ease-in; /*animate transform property */
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>

Dan untuk kode htmlnya :

<ul class="bubblewrap">
<li><a href="URL MEDIA KAMU"><img src="URL GAMBAR KAMU" title="Add to Stumbleupon" /></a></li>
<li><a href="URL MEDIA KAMU"><img src="URL GAMBAR KAMU" title="Add to Facebook" /></a></li>
<li><a href="URL MEDIA KAMU"><img src="URL GAMBAR KAMU" title="Add to Digg" /></a></li>
<li><a href="URL MEDIA KAMU"><img src="URL GAMBAR KAMU" title="Add to Twitter" /></a></li>
<li><a href="URL MEDIA KAMU"><img src="URL GAMBAR KAMU" title="Add RSS Feed" /></a></li></ul>

* jangan lupa URL GAMBAR KAMU dan URL MEDIA KAMU di ubah ya..
nah.. Bagaimana hasilnya,,?
Contoh :

• 
• 
• 
• 
• 

oke plend.
Jika artikel ini bermanfaat, jangan lupa tinggalkan jejak dalam kolom komentar...