Hover Keterangan Gambar Dengan Css3 Pada Post

arahkan mouse anda pada gambar-gambar di bawah !

---

JUDUL GAMBAR PERTAMA
di sini tempat penjelasan gambar anda

JUDUL GAMBAR KEDUA
di sini tempat penjelasan gambar anda

JUDUL GAMBAR KETIGA
di sini tempat penjelasan gambar anda

---

cara membuat:

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 menerapkannya pada blog kalian, copy script css dibawah ini dan letakan diatas kode ]]></ b: skin>

CSS

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

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

Semoga bermanfaat,

http://situseo.blogspot.com/
Sumber :

---

DAFTAR ISI