Efek Animasi Hover Pada Gambar

Efek Animasi Hover Pada Gambar - Mungkin anda sudah pernah melihat diblog teman anda atau blog lainnya yang menggunakan efek animasi hover pada gambarnya. Nah, pada pembahasan kali ini saya mau sharing mengenai cara membuat efek animasi hover pada gambar. namun sebelumnya dilihat dulu preview dari efek animasi hover ini yang dibuat dengan CSS3 :

Cara Membuat Efek Animasi Hover Pada Gambar :

• Masuk ke blogger -> Rancangan -> Edit HTML.
• Lalu cari kode ]]></b:skin>
• Taruh kode dibawah ini diatas atau sebelum kode tadi.

#image-hover {
}
#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:100%;
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: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}

• Simpan template.
• Pemanggilan pada gambar :

<div id="image-hover">
<div id='figure'>
<img src="IMAGE-URL-HERE"/>
<span class='caption'>
<b>Title Here..</b>
Description Here...
</span>
</div>

Selesai :D

Tweet

Subscribe to receive free email updates: