Overlay CSS untuk galeri

Berikut ini adalah css yang bisa digunakan untuk mempercantik sebuah galeri gambar, dengan menggunakan css ini anda bisa memberikan efek pada gambar yang diinginkan ketika mouse melintas diatasnya (hover).

.hovereffect {
   width: 100%;
   height: 100%;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background: #42b078;
 }

 .hovereffect .overlay {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   padding: 50px 20px;
 }

 .hovereffect img {
   display: block;
   position: relative;
   max-width: none;
   width: calc(100% + 20px);
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s;
   -webkit-transform: translate3d(-10px,0,0);
   transform: translate3d(-10px,0,0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }

 .hovereffect:hover img {
   opacity: 0.4;
   filter: alpha(opacity=40);
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
 }

 .hovereffect h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   overflow: hidden;
   padding: 0.5em 0;
   background-color: transparent;
 }

 .hovereffect h2:after {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: #fff;
   content: '';
   -webkit-transition: -webkit-transform 0.35s;
   transition: transform 0.35s;
   -webkit-transform: translate3d(-100%,0,0);
   transform: translate3d(-100%,0,0);
 }

 .hovereffect:hover h2:after {
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
 }

 .hovereffect a, .hovereffect p {
   color: #FFF;
   opacity: 0;
   filter: alpha(opacity=0);
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s;
   -webkit-transform: translate3d(100%,0,0);
   transform: translate3d(100%,0,0);
 }

 .hovereffect:hover a, .hovereffect:hover p {
   opacity: 1;
   filter: alpha(opacity=100);
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
 }

Berikut script html untuk gambarnya yang digunakan.

<div class="col-sm-3" style="padding:0px;">
    <div class="hovereffect">
    <img src="<?php echo base_url();?>/images/portofolio/Jellyfish.jpg" style="height:200px;">
    <div class="overlay">
                 <h2>Portofolio #13</h2>
      <p> 
       <a href="#">LINK HERE</a>
      </p> 
             </div>
             </div>
   </div>

Hasilnya bisa dilihat pada gambar dibawah, jika mouse diarahkan ke gambar tersebut akan muncul animasi digambar tersebut.