Mei 06, 2012

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.

caption atau keterangan gambar ketika hover

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


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

12 Diskusi untuk Hover Keterangan Gambar Dengan Css3 Pada Post

6 Mei 2012 04.20  

bagus sekali! masyaAllah..
apa ini berlaku untuk semua gambar di postingan?

mantab..... udah jalan2 k mna2. nemunya di sini...... hhe ^^

6 Mei 2012 22.59  

@Nurmayanti Zainbisa, hanya tidak otomatis, harus menambahkan kode html pada gambar tersebut

9 Mei 2012 23.18  

mas dalng, share dong gimana caranya buat widget show hide di sidebar? seperti pada widget sidebar blog ini.....

10 Mei 2012 01.19  

@Ilham Bachtiar sudah di share

11 Mei 2012 22.33  

mas, udah pernah share open & close comment form belum ?
kalo belum tolong dishare :D

sukses selalu buat mas dalang

19 Mei 2012 22.07  

nice post , i like thiss

bagus bener tampilan ini blog..#jadiiri..kwkwk

11 Desember 2012 15.54  

gagal gan,, yang salah apa ya,pdhl sudah mengikuti yang diatas..

4 Januari 2013 08.21  

saya masih belum mengerti yang di kotak HTML itu di gunakan pas dimana :/

maklum newbi :)

15 Oktober 2013 21.51  

thnx gan tutor nya :)

15 Oktober 2013 22.58  

thnx gan biar makin mantap gambar nya :)

Poskan Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top