Make Caption Image Ala CSSDeck

Curi-curi kesempatan update postingan walau waktu belum sepenuhnya mengijinkan Koben kembali melakukan aktifitas blogging in the pret! Oleh sebab artikel yang akan disampaikan ringan-ringan dulu :d Basicly mari bermain sambil belajar sobat sudah barang tentu kenal dengan satu web yakni CSSDeck dan merupakan salah satu Referensi CSS3 Ala si Bloglang ;)
Koben akan berbagi trick membuat caption image seperti yang ada di Css-Deck. Trick hover sederhana namun dengan keberadaan caption pada gambar memberikan kesan tersendiri (keterangan alakadar)

Markup HTML

<div class="item">

<a href="http://LINK-TUJUAN" class="item_img" title="YOUR TITLE">
<img alt="" src="http://LINK-GAMBAR" />
<p class="judul">KETERANGAN ALAKADAR (ISI CAPTION)</p>
</a>

</div>

Kode CSS

.item_img {
display: inline-block;
text-decoration: none;
}
p.judul {
padding: 0 10px;
margin: 0;
font-weight: bold;
color: #eee;
position: absolute;
padding: 5px 10px;
bottom: 0; left: 0; right: 0;
display: block;
line-height: 23px;
background: rgba(0, 0, 0, 0.5);
font-size: 15px;
/* CSS3 */
-webkit-transition: all 0.5s ease-in-out 1s;
-moz-transition: all 0.5s ease-in-out 1s;
-o-transition: all 0.5s ease-in-out 1s;
-ms-transition: all 0.5s ease-in-out 1s;
transition: all 0.5s ease-in-out 1s;
}
a:hover p.judul {
display: none;
/* CSS3 */
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
.item {
float: left;
position: relative;
margin: 10px;
overflow: hidden;
padding: 10px;
background: #555;
}

Live Demo

Simple CSS3 3D Cube

FlipCard with CSS3

Sliding Clipboard Whiteboard only CSS

Collection of menu effects

Page Curl Box Shadow