Make Slide Description Effect on Image

Bosan melakukan pencarian gambar dengan tampilan konvesional? Silahkan coba layanan satu ini search-cube menampilkan search image bergaya cube 3D. Bisa diputar-putar dan image filter dari 6 website ternama b-) Tapi saya tidak akan membahas mengenai hal itu, Koben mau berbagi seputaran trik hover lagi :D Hasil blog walking silaturahmi ke blogger spanyol tepatnya master Johnny owner dari @REDEANDOblog
Contoh karya membuat peta dunia pakai CSS + tooltip - read here Koben mau berbagi artikel bagian sliding effect description on image
Let see mas bro

Ini adalah contoh dari slide description effect yang diterapkan pada sebuah gambar!!! Keren kan coyyy...

Karena bersifat absolute, maka trik ini cocok bagi yang suka memosting gambar tanpa merubah-rubah posisi dan lebar dari gambar tersebut!

KODE CSS

.ImageDesc {
position: relative;
}
.ImageDesc img{
position: relative;
z-index: 1;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}
.ImageDesc div.desc{
position: absolute;
width: ;
bottom: 0;
left: 13px;
padding: 9px;
background: rgba(0, 0, 0, 0.55);
color: white;
font-size: 13px;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-moz-transition: all 0.3s ease 0.3s;
-webkit-transition: all 0.3s ease 0.3s;
-o-transition: all 0.3s ease 0.3s;
-ms-transition: all 0.3s ease 0.3s;
transition: all 0.3s ease 0.3s;
}
.ImageDesc:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
}

MARKUP HTML<div class="ImageDesc">

<img src="OUT-IMAGE-HERE" alt="" />

<div class="desc">

PENJELASAN DI SINI.

</div>

</div>Isikan variable width pada sesi ImageDesc div.desc sesuaikan dengan lebar image yg dipakai.

Kalau mau mencari trick hover search ajah di kotak pencarian ;)
http://beben-koben.blogspot.com/2012/01/trick-hover-and-active-selector-for.html
http://beben-koben.blogspot.com/2012/06/five-css3-hover-effects-by-alessio.html
http://beben-koben.blogspot.com/2012/03/css3-lagi-lagi-lagi-css-3.html
http://tympanus.net/Tutorials/OriginalHoverEffects/
http://www.webdesignlondon-tristar.co.uk/general/jquery-sliding-boxes-captions
Happy hover \m/