Hover Keterangan Gambar Dengan Css3 Pada Post

Situseo Blog : Memberi keterangan gambar pada post image akan membantu pembaca untuk mengetahui penjelasan dari gambar yang dimaksud, efek hover yang ditampilkan pada keterangan gambar berbentuk slide dari arah kiri ke arah kanan dan sebagai alternatif pilihan, efek hover ini bisa dari bawah ke atas, dan script yang digunakan menggunakan css level 3.

Menambahkan keterangan gambar pada post, tentu saja akan mempercantik tampilan blog, terutama untuk tampilan post. Script ini sangat cocok digunakan bagi mereka yang mempunyai blog dengan banyak penggunaan gambar sebagai penambah keterangan suatu posting (artikel). Kelebihan script ini karena menggunakan css, tentu saja penggunaannya mudah dan untuk hover keterangan gambar pun akan menyesuaikan ukuran dari gambar yang ditampilkan.

Untuk memperjelas apa yang saya maksudkan, kalian bisa melihat screen shot dibawah ini atau melihat demonya secara langsung.

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>JUDUL 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;
}

Demo: Hover Keterangan Gambar

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

Semoga bermanfaat,
Image by BangAdie