Sabtu, 02 Juni 2012

Cara Membuat Efek Hover Captions Dengan Animasi Pada Gambar Blog


By on 18.17

Blazer Blog, Tutorial Blog - Kali ini saya akan membahas cara membuat efek hover captions dengan animasi pada gambar Blog, maksudnya saat kursor menyentuh gambar tersebut maka secara otomatis akan muncul captions dengan animasi, deskripsi dan judul seperti gambar di bawah ini.


Dan berikut cara membuat efek hover captions dengan animasi pada gambar blog.
1. Login ke Blog kamu.
2. Pilih Rancangan.
3. Pilih Edit HTML, cari kode ]]></b:skin> setelah ketemu letakan kode di bawah ini tapat di atas kode ]]><b:skin>
#image-hover {
}
#image-hover img{width:200px;height:200px}
#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}
#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}
#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}
#figure:hover .caption {
margin-bottom:0px;
}
#image-hover .caption {
width:190px;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
#image-hover .caption b {
text-shadow: 0px 2px 0px #000;
}
#image-hover .caption {
color: #ddd;
line-height: 20px;
font-size: 11px;
text-shadow: 0px 2px 0px #000;
}
#image-hover a:link,#image-hover a:visited{font-size:11px;font-weight:bold;color:#fff;text-decoration:none}
#image-hover a:hover{color:#ff9900;}
Untuk kode yang berwarana biru itu adalah Width(Lebar gambar)  Height(Tinggi Gambar) sesuaikan dengan selera kamu.
Dan untuk kode yang berwarna merah sesuaiakan saja dengan lebar gambar Width : (jika lebar gambar 200px, maka lebar yang ini 190px) dan Height : (tinggi captions saat di sorot mouse)

Dan sekarang untuk membuat gambar dengan efek captions animasi perhatikan baik-baik kode di bawah ini.
<div id="image-hover">
<div id='figure'>
<img src="http://4.bp.blogspot.com/-YU-X0rwFzR4/T7udB9KAiYI/AAAAAAAACvc/uM8UHSE_9Nw/s320/Images+Zoom+and+Hover+Efect.png"/>
<span class='caption'>
<a href="http://blazerracing.blogspot.com/2012/05/cara-memberi-efek-zoom-dan-hover-pada.html"/>Cara Memberi Efek Zoom Dan Hover Pada Gambar Dengan jQuery</a> <br/>
kali ini efek nya ditambah dengan efek zoom atau membesar,
</span>
</div>
</div>
Ganti kode yang berwarna biru dengan URL gambar.
Ganti kode yang berwarna merah dengan URL yang dituju.
Ganti kode yang berwarna Ungu dengan Judul.
Ganti kode yang berwarna orange dengan Deskripsi.

Selsai deh, jika ada hal yang kurang paham silahkan tinggalkan pesan di kotak komentar.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

6 komentar:

  1. berpengaruh ga gan sama loading blog...???

    BalasHapus
  2. kalo gambarnya dua gimana bos,,

    BalasHapus
  3. Ya mudah tinggal tambah lagi kode yg sama percis kode yang berwarna di atas.

    BalasHapus
  4. yang kedua itu di copy kemana yah?

    BalasHapus
  5. Untuk yang nomor 3 kan ada petunjuknya dimana copy nya, dan untuk kode yang selanjutnya sobat klik Add gadget > HTML/Javscript.

    BalasHapus