Trik Hover dan Aktif Selektor Untuk Gambar

Contoh :

CSS Code:
<style type="text/css">
.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;
}
</style>

HTML :

<div class="images_B">

<a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4nqJuxJX0IcG9t0YoFMEbUfFEUKdlIKrpWfieCN4kqGJEDZ1gpA7AfGXHCHvcsKXuPxoMih6CKUgS3K4IoJ24rG6Sinlr5SnpR0owSBJ9cowTBrr8Pl7xsBtjczTcue5bWDfmqZJ7isAT/s1600/hotpants55.jpg" alt="" />
</a>
<div class="isi">
<small>Click and Hold...!!!</small>
<br />Keterangan...
<br />Keterangan...
</div>

</div>