Make Caption Image Ala CSSDeck - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Caption Image Ala CSSDeck, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article Snippet, Article Trik dan Tips, we write this you can understand. Well, happy reading.

Title : Make Caption Image Ala CSSDeck
link : Make Caption Image Ala CSSDeck

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

Thus articles Make Caption Image Ala CSSDeck

that is all articles Make Caption Image Ala CSSDeck This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Caption Image Ala CSSDeck with the link address https://autopostingblogspot.blogspot.com/2012/05/make-caption-image-ala-cssdeck.html