Keterangan gambar dalam bentuk slide - Hallo Sob Jody Blog, artikel kali ini berjudul Keterangan gambar dalam bentuk slide, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Keterangan gambar dalam bentuk slide
link : Keterangan gambar dalam bentuk slide

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

Demikianlah Artikel Keterangan gambar dalam bentuk slide

Sekian Keterangan gambar dalam bentuk slide, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Keterangan gambar dalam bentuk slide dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2012/10/keterangan-gambar-dalam-bentuk-slide.html Semoga artikel ini bisa bermanfaat.

Tweet