Cara Membuat Efek Hover Captions Dengan Animasi Pada Gambar 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.

LIVE DEMO

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 ]]>

 setelah ketemu letakan kode di bawah ini tapat di atas kode ]]>

#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.

http://4.bp.blogspot.com/-YU-X0rwFzR4/T7udB9KAiYI/AAAAAAAACvc/uM8UHSE_9Nw/s320/Images+Zoom+and+Hover+Efect.png

"/>

http://blazerracing.blogspot.com/2012/05/cara-memberi-efek-zoom-dan-hover-pada.html"/>Cara Memberi Efek Zoom Dan Hover Pada Gambar Dengan jQuery

kali ini efek nya ditambah dengan efek zoom atau membesar,


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.

source