Posted by : Ryo Apri 9 Mei 2012

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


Semoga Bermanfaat :D


Leave a Reply

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

Banner

banner banner banner banner

Follow

Blog, Blogger, Tips, Tricks, Music, Ryo, Apri, R-Ryuzaki™, Ryo Apri, Science, software, template, colour code, social, Game, l-nino Blog, Blogger, Tips, Tricks, Music, Ryo, Apri, R-Ryuzaki™, Ryo Apri, Science, software, template, colour code, social, Game, l-nino

- Copyright © 2013 RLanzer -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -