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
