Caption Image with CSS3

Bagi-bagi lagi blog yang memuat hack dan tutorial blogspot nih sob. Perhatikan pada bagian kanan blog yang bertuliskan categories! Setelah beres mengacak-ngacak, ternyata banyak artikel mengenai slideshow. Seperti biasa Beben Koben si bloglang anu ganteng kalem tea akan bagi satu trik sederhana yaitu mengenai trick image with caption when hover :D Pernah dolo aku posting image with effect isolasi ;))
Gambar ketika disorot sama cursor akan terbuka sebuah keterangan singkat (caption) berupa kata-kata mutiara. Yaaa kalau dilink itu namanya tooltip kala kita menyertakan penulisan atribut title pada syntax link. Demonya kagak ada, ganti screenshot aja yah ;) :D

Macam 'ntuh dah, jadi bisa lebih memberi gaya pada image biar lebih atraktif bro b-) Kerennya lagi kita akan membuatnya full menggunakan CSS. This is time for CSS3 \m/
Letakkan code CSS berikut tepat diatas/sebelum kode </b:skin>

CSS3 Coded

#capture {
position:relative;
float: left;
margin: 5px;
overflow: hidden;
padding: 5px;
}
#post-image .caption {
width: 100%;
height: 65px;
background: #111;
color: #fff;
font-family: Arial, Verdana, sans-serif;
line-height: 15px;
font-size: 13px;
}
#capture:hover .caption {
margin: 0;
padding: 5px 5px 0 8px;
}
#capture:hover {
cursor: help;
background-color: #333;
-moz-box-shadow:0 0 20px rgba(0,0,0,0.65);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.65);
box-shadow:0 0 20px rgba(0,0,0,0.65);
}
#capture .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom: -115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

Sudah deh jadi, save deh pekerjaannya. Ketika sobat melakukan postingan, yang harus dilakukan ialah menambahkan sedikit kode HTML pada syntax image ;)

<div id="post-image">
<div id='capture'>

<img style="display:block; margin:0px auto 10px; text-align:center;" src="http://YOUR-LINK-IMAGE.png" border="0" alt="" id="BLOGGER_PHOTO_ID_1234567890987654321" />

<span class='caption'>

<b>IMAGE TITLE HERE</b>
Blogger or Blogspot powered by Google!

</span>

</div>
</div>

Perhatikan coded HTML yg diberi warna! Biar tidak lupa itu rumusan html-nya, sobat simpan saja langsung di editor post blogger :-/<div id="post-image">
<div id='capture'>

<img src="http://YOUR-LINK-IMAGE.png" alt="" />

<span class='caption'>

<b>IMAGE TITLE HERE</b>
Balh Bleh Bloh Aw Aw Aw

</span>

</div>
</div>>> Copy HTML coded
>> Settings
>> Formatting
Scroll down to bottom look "Post Template"

save settings

Silahkan sobat kunjungin blog yang Beben janjikan pada muqodimah diatas tadi :) tara...http://www.wierdwalker.com/