◄ Min  Size Fonts: + | - | ± Color: Max ►

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

Loading...
XMake Caption Image Ala CSSDeck

Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE