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:

  • Profil Blogger
  •  
  • Profil G+
  •  
  • Profil Facebook
  •  
  • Profil twitter
  •  
  • profil Youtube
  •  
  • rss feed
  •  
  • comment feed
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

No comments:

Post a Comment

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".

Sebelumnya vito minta maaf yg sebesar"nya jika komentar anda belum sempat dibales. ^^

Followers

Lagi Naik Daun