Trick Hover and Active Selector for Image

Bila sobat mencari kumpulan list mengenai CSS all about CSS tempatnya. Disana Koben selalu menyimpan link web CSS khususnya selama melakukan blog walking. Tapi bukan berarti link yang lain saya lupakan, lihat contoh beberapa links keren yg saya temukan ini sob collected lists! Bila kita melakukan walking² ke web yg ada disana saja, mungkin kita sudah bisa mengikuti apa² yg memang lagi hot & trend di dunia per-css-an :D Agar bisa melakukan hal itu, maka sobat harus mempunyai juga daftar list links yg dimaksud ;) Selalu simpan kalau menemukan link unik, aneh, berbeda dari yg lain itu ya. Jangan suka teriak tukeran link yukkk tapi tidak pernah menengok linknya :D Koben kasih deh daftar lists web CSS keren² buat kalian great lists of web CSS.

Seperti web satu ini yang selalu mengeluarkan trick sekitaran CSS http://designshack.net/ Lumayan sob buat menambah perpustakaan resource ;) Design Shack belum lama memosting artikel Build a Fun Trivia Game With the CSS Active Selector! Apakah itu? Trik ketika kita melakukan hover pada image akan tampak secuil info dgn kata² pendek, lalu ketika kita menahan klik (active selector) pada image akan terlihat keterangan yg dibubuhkan disana.
Melihat demonya info yg tertera posisi berada diatas (kala menghover) dan bertuliskan "Click for the answer:" Cocok dengan komposisi seperti itu, silahkan sobat sikat ramuannya disana :D Bagaimana bila kita menginginkan kebalikan dari yg ada pada demo! Like this...

HTML Markup

<div class="images_B">

<a>
<img src="http://link-image-add-here.jpg" alt="" />
</a>
<div class="isi">
<small>Click and Hold...!!!</small>
<br />Keterangan...
<br />Keterangan...
</div>

</div>

CSS Code

.images_B {
display:block;
 height: 174px;
 width: 232px;
 overflow: hidden;
 background-color: rgba(255, 255, 255, .1);
 cursor: pointer;
 -webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
 -moz-box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
 box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
}
a img {
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 transition: all 0.3s ease;
}
a:hover img {
 margin-top: -21px;
}
a:active img {
 margin-top: -60px;
}
small {
 font: 10px/1.5 Verdana;
color: #000;
text-shadow: 0 0 5px #000;
}
.isi {
text-align: center;
font: bold 13px/1.5 Arial;
margin: 2px auto 0;
}

Rubahlah width & height sesuai dengan kebutuhan masing². Good luck :)
Happy blogging \m/