Efek Image Bubble untuk Mempercantik Blog

Efek Image Bubble untuk Mempercantik Blog

• 
• 
• 
• 

Efek Image Bubble adalah gabungan antara efek transisi dan transformasi dimana ketika kita me-mouseover suatu gambar, gambar tersebut akan bergerak menjadi lebih besar dan kemudian kembali ke ukuran semula ketika mouse tidak lagi di atasnya. Dan mungkin ada Temen-temen yang mengira kalau efek tersebut menggunakan JavaScript!? Tidak Teman, efek tersebut hanya menggunakan CSS, tepatnya CSS3. Berikut TB sajikan Tutorial membuat Efek Image Bubble :

Kode CSS:

Letakkan kode dibawah ini sebelum kode ]]></b:skin>

<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*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-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>

Kode HTML

<style type="text/css">

<ul class="bubblewrap">

<li><a href="http://www.tutorial-blog.co.cc/"><img src="http://img225.imageshack.us/img225/7335/stumbleupon.png" /></a></li>

<li><a href="http://www.tutorial-blog.co.cc/"><img src="http://img812.imageshack.us/img812/3326/facebookfq.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.tutorial-blog.co.cc/"><img src="http://img697.imageshack.us/img697/9117/diggi.png" title="Add to Digg" /></a></li>

<li><a href="http://www.tutorial-blog.co.cc/"><img src="http://img96.imageshack.us/img96/194/twitterad.png" title="Add to Twitter" /></a></li>

<li><a href="http://www.tutorial-blog.co.cc/"><img src="http://img258.imageshack.us/img258/1686/rssin.png" title="Add RSS Feed" /></a></li>

</ul>

Temen-temen bisa memilih dimana akan meletakan gambar dengan efek image bubble tersebut, apa di posting atau di elemen HTML. Jika di postingan maka tinggal copy-paste kode HTML tersebut pada Edit HTML posting. Jika ingin meletakan di Elemen Halaman maka Pilih Tambah Gadget (pada Rancangan, Elemen Halaman), kemudian pilih HTML/ JavaScript, nah, tinggal pastekan kode HTML di atas. Simpan deh.

Gambar yang digunakan tidak harus selalu berupa social bookmarks icons. Temen-temen dapat memilih gambar milik Temen-temen sendiri. Hosting-kan terlebih dahulu gambar Temen-temen, lalu co-pas direct URL gambar Temen-temen ke kode <img src="........"/>.
Dan juga gambar tidak harus berupa link, jika gambar hanya berfungsi sebagai penghias saja maka link dapat dihapus.