Cara Membuat Image Thumbnail Overlay dengan Bootstrap

Membuat thumbnail dengan bootstrap sudah pernah saya post sebelumnya, namun disini akan membahas thumbnail sebagai pengembangan dari bootstrap. Thumbnail akan dibuat dengan hover overlay, jadi ketka kursor diarahkan ke image thumbnail tersebut makan akan memiliki properti warna dan text yang akan muncul.

Perhatikan kode HTML dibawah ini.

<div class="thumbnail">
    <div class="img-thumb">
       <img src="img/c.png" class="img-responsive">
       <div class="cap-hover">
    <span class="glyphicon glyphicon-cog"></span>
       </div>            
    </div>    
        <div class="caption">
        <a href=""><h1>Title Here</h1></a>
        <p>Lorem ipsum dolor set amet...Lorem ipsum dolor set 
 amet...Lorem ipsum dolor set amet...Lorem ipsum dolor set amet...</p>
         <a class="btn btn-danger">View detail</a>
     </div>
</div>

Perlu diperhatikan elemen dengan class .img-thumb yang menjadi box overlay ketika kursor mengerah tepat di image.

Kode CSS

.img-thumb{
 cursor: pointer;
 position: relative;
 overflow: hidden;
}

.img-thumb .cap-hover{
 background-color: rgba(143,186,16,0.7); //setting warna background
 position: absolute;
 top: 0;
 z-index: 99;
 left: 0;
 opacity: 0;
 width: 100%;
 text-align: center;
 height: 100%;
}

.img-thumb span{
 font-size: 32px;
 bottom: 0;
 top: 50%;
 transform:translateY(-50%);
 color: #eee; //setting warna icon
}

.img-thumb:hover .cap-hover{
 opacity: 1;
}

hasil dari penerapan kode diatas akan terlihat seperti dibawah ini. Untuk melihat hasilnya dengan tepat arahkan kursor anda ke foto tersebut dan akan mencul sesuatu :D

Title Here

Lorem ipsum dolor set amet...Lorem ipsum dolor set amet...Lorem ipsum dolor set amet...Lorem ipsum dolor set amet...
View detail

Silahkan dicoba, dipahami dan harapannya dapat tercapai :). Sekian pembahasan kali ini, semoga bermanfaat. Jika ada yang kurang dipahami dapat didiskusikan dibawah pembahasan ini.