Keterangan Gambar Dengan CSS3 Pada Post

Keterangan gambar membuat pengunjung tau apa yg dimaksut ambar tsb sob ,,,nah kali ini gw mau ngepost trik Keterangan Gambar Dengan CSS3 Pada Post ,,


langsung aja sob

1.Cari kode

]]></ b: skin>

2.Letakkan CSS atau HTML dibawah ini diastas  ]]></ 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 diatas merupakan hover dari kiri ke kanan dan jika sobat ingin dari bawah ke atas cukup mengganti kode menjadi seperti dibawah ini

#objek .ket {margin-bottom:-300px;}

 dan

#objek:hover .ket {
margin-bottom:0px;
}

 DEMO

Semoga Bermanfaat :D

SUMBER

Share This:

Facebook Twitter Pinterest Linkedin Whatsapp Whatsapp

About Rio Apri

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.