Hover Keterangan Gambar Dengan Css3 Pada Post

Di hari ini taukahbahwa.blogspot.com akan menyajikan posting tentang Hover Keterangan Gambar Dengan Css3 Pada Post. Semoga dengan berita Hover Keterangan Gambar Dengan Css3 Pada Post akan menambah pengetahuan untuk anda pembaca setia taukahbahwa.blogspot.com

Untuk menerapkannya pada blog kalian, copy script css dibawah ini dan letakan diatas kode ]]></ b: skin>

CSS

#objek {
float: left; 
margin: 10px; 
overflow: hidden;
position: relative;
}
.ket {
width: 80%; 
height: auto; 
text-align: left;
padding: 5px 10px; 
background: #000;
opacity: 0.6;
color: #fff;
line-height: 18px; 
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;  
-webkit-border-radius: 0x 25px 0px 0px;
-moz-border-radius: 0px 25px 0px 0px;
-o-border-radius: 0px 25px 0px 0px; 
border-radius: 0px 25px 0px 0px;
}
#objek .ket {
position: absolute; 
bottom: 0; 
left: 0;
margin-left: -1000px; 
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out; 
}
#objek:hover {
-webkit-box-shadow:0px 0px 25px #000000;
-moz-box-shadow:0px 0px 25px #000000;
-o-box-shadow:0px 0px 25px #000000;
box-shadow:0px 0px 25px #000000;
}
#objek:hover .ket {
margin-left: 0px;
}

HTML

<div id="objek">
<img src="url gambar" />
<div class="ket">
<b>Hover Keterangan Gambar Dengan Css3 Pada Post GAMBAR</b><br />
keterangan/penjelasan dari gambar
</div>
</div>

Script tersebut diatas merupakan efek hover dari kiri ke-kanan, untuk menghasilkan efek hover dari bawah ke-atas, kalian cukup mengganti menjadi seperti :

#objek .ket {
margin-bottom: -300px;
}

dan

#objek:hover .ket {
margin-bottom: 0px;
}

Semoga keterangan gambar ini bisa membantu pengunjung untuk lebih memahami artikel yang dimaksud dan bisa mempercantik tampilan blog terutama bagian post.

Semoga bermanfaat,

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com