Keterangan gambar dalam bentuk slide

S

etelah beberapa hari ngak update ,kaget juga melihat site info Alexa ku kembali menggelembung ,sebenarnya bingung juga bahan apa yang bisa buat update untuk postingan kali ini ,akhirnya setelah sekian lama aku simpan sebagai draf nah ini saat nya cara membuat Keterangan gambar dalam bentuk slide aku publikasikan caranya sangat mudah hanya dengan menambahkan kode css seperti di bawah ini tepat di atas kode ]]></b:skin berikut kodenya :

#gambar { float: left; margin: 10px; overflow: hidden; position: relative; } .ket { width: 90%; height: auto; text-align: center; padding: 5px 10px; background: red; opacity: 1.0; 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 0px 0px 0px; } #gambar .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; } #gambar:hover { -webkit-box-shadow:0px 0px 25px blue; -moz-box-shadow:0px 0px 25px blue; -o-box-shadow:0px 0px 25px blue; box-shadow:0px 0px 25px blue; } #gambar:hover .ket { margin-left: 0px; }

dan sebagai pemanggilan di kode HTMLnya gunakan kode seperti dibawah ini

<div id="gambar">
<img height="250" src="url gambar" width="200" />
<div class="ket">
<b>JUDUL GAMBAR</b>
keterangan/penjelasan dari gambar </div>
</div>

untuk teks warna biru sesuaikan dengan ukuran gambar sobat , sedangkan untuk teks berwarna hijau silahkan sobat isi dengan keterangan gambar yang ingin sobat tampilkan ,sebagai bahan demonya silahkan arahkan cursor/mouse ke arah gambar di bawah ini pasti keterangan slide seperti keterangan di atas akan muncul

FOTO SEXI JUPE
Setelah melihat gambar ini terus aku harus bilang wow..gitu