Cara Membuat Efek Hover Captions dengan Animasi Pada Gambar Blog

Cara Membuat Efek Hover Captions dengan Animasi Pada Gambar Blog  -  Dulu saya

pernah membahas tentang Cara Menambahkan Caption Pada Gambar Blog dengan CSS. Dan kali ini yang akan saya share adalah Cara Membuat Efek Hover Captions dengan Animasi Pada Gambar Blog . Maksudnya saat kursor menyentuh gambar tersebut, maka gambar tersebut secara otomatis akan muncul captions dengan animasi. Contohnya seperti gambar dibawah ini :

 

Berikut tutorialnya :

1. Masuk ke Akun Blogger sobat

2. Pilih Rancangan, Edit HTML, Centang "Expand Template Widget"

3. Cari kode ]]><b:skin>, bila sudah Copy kode dibawah ini tepat diatas 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;}

Ket: Ganti yang berwarna merah dengan lebar dan tinggi widgetnya

Dan sekarang untuk membuat gambar dengan efek captions, berikut kodenya

<div id="image-hover">
<div id='figure'>
<img src="http://3.bp.blogspot.com/-CxUTqI_uKdQ/T17CEODWddI/AAAAAAAAA9w/ik3l8RT6F7k/s320/Untitled.png"/>
<span class='caption'>
<a href="http://tutorial-blogz.blogspot.com/2012/06/cara-membuat-garis-tepi-di-setiap.html"/>Cara Membuat Garis Tepi di Setiap Postingan Blog</a> <br/>
kali ini efek nya ditambah dengan efek zoom atau membesar
</span>
</div>
</div>

Ket: Ganti yang warna biru dengan URL Gambarnya

Ganti yang warna merah dengan URL yang akan dituju

Ganti yang warna ungu dengan Judul

Ganti yang warna hijau dengan Deskripsi Gambarnya

Share this post