CARA MEMBUAT EFEK IMAGE BUBBLE PADA BLOG

Sekedar share bagi yang suka mempersonalisasi tampilan halaman post blogspotnya, pada kesempatan ini saya akan sedikit share tentang pembuatan Image Bubble menggunakan CSSyang dalam hal ini memanfaatkan efek transform dan transisi pada CSS.

Lihat tampilan berikut:

• 
 
• 
 
• 
 
• 
 
• 
 
• 
 
• 

Begitulah contohnya. Dan untuk membentuk tampilan animasi bubble seperti diatas, dibutuhkan susunan kode CSS seperti berikut:

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

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

.iskarujibubble li img{
width: 55px; /* Lebar Gambar.*/
height: 60px; /* Tinggi Gambar.*/
border:0;
margin-right: 12px; /*Jarak tiap gambar*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*Property Animasi transform */
-o-transition:-o-transform 0.1s ease-in; /*Property Animasi transform pada Opera */
}

.iskarujibubble li img:hover{
-moz-transform:scale(1.8); /*Skala gambar hingga 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

Dan ini adalah cara penulisan kode gambarnya:

<ul class="iskarujibubble">
<li><a href='URL TARGET GAMBAR' target='_blank'><img alt='ALT GAMBAR' src='URL GAMBAR'/></a></li>
<li><a href='URL TARGET GAMBAR' target='_blank'><img alt='ALT GAMBAR' src='URL GAMBAR'/></a></li>
<li><a href='URL TARGET GAMBAR' target='_blank'><img alt='ALT GAMBAR' src='URL GAMBAR'/></a></li>
<li><a href='URL TARGET GAMBAR' target='_blank'><img alt='ALT GAMBAR' src='URL GAMBAR'/></a></li>
<li><a href='URL TARGET GAMBAR' target='_blank'><img alt='ALT GAMBAR' src='URL GAMBAR'/></a></li>
<li><a href='URL TARGET GAMBAR' target='_blank'><img alt='ALT GAMBAR' src='URL GAMBAR'/></a></li>
<li><a href='URL TARGET GAMBAR' target='_blank'><img alt='ALT GAMBAR' src='URL GAMBAR'/></a></li>
</ul>

Selamat berkreasi and happy blogging