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 pukul 04.20  

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

6 Mei 2012 pukul 08.32  

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

6 Mei 2012 pukul 22.59  

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

9 Mei 2012 pukul 23.18  

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

10 Mei 2012 pukul 01.19  

@Ilham Bachtiar sudah di share

11 Mei 2012 pukul 22.33  

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

sukses selalu buat mas dalang

19 Mei 2012 pukul 22.07  

nice post , i like thiss

24 Mei 2012 pukul 00.35  

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

11 Desember 2012 pukul 15.54  

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

4 Januari 2013 pukul 08.21  

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

maklum newbi :)

Anonim
15 Oktober 2013 pukul 21.51  

thnx gan tutor nya :)

Anonim
15 Oktober 2013 pukul 22.58  

thnx gan biar makin mantap gambar nya :)

Posting 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,
Ping your blog, website, or RSS feed for Free Web DirectoryMy Ping in TotalPing.comBloggers - Meet Millions of Bloggers
Protected by Copyscape Duplicate Content Check

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

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