CodePen

HTML

            
              <div class="wrapper">
  <ul class="image_holder">
  <li>
    <img src="http://www.theunrealtimes.com/wp-content/uploads/2012/11/federer-roger-federer-31390177-400-472.jpg" />
    <!--hidden div-->
    <div class="cover"></div>
    <div class="cover_content">
      Roger Federer - The Greatest Ever
      
      
    </div>
    
    <!--hidden div-->
    </li>
  
  
  </ul>
  
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .wrapper{width:980px; margin:30px auto;}

.image_holder{display:block; margin:0; padding:0; list-style:none;}
.image_holder li{display:block; width:200px; height:200px; overflow:hidden; position:relative; border:2px solid #000;}
.image_holder li img{width:200px; border:none; outline:none;}

.cover{display:block; position:absolute; left:0; top:0px; z-index:50; width:200px; height:200px; background:#000; -webkit-opacity: 0.0;
  -moz-opacity: 0.0;
  filter:alpha(opacity=0);
  opacity:0.0;
  -webkit-transition: opacity 0.6s ease-in-out;
  -moz-transition: opacity 0.6s ease-in-out;
  -ms-transition: opacity 0.6s ease-in-out;
  -o-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
}
.cover_content{display:block; position:absolute; left:0; top:0px; z-index:80; width:180px; height:180px; padding:10px; color:#fff; font-family:Arial; font-size:12px;
-webkit-opacity: 0.0;
  -moz-opacity: 0.0;
  filter:alpha(opacity=0);
  opacity:0.0;
  -webkit-transition: opacity 0.6s ease-in-out;
  -moz-transition: opacity 0.6s ease-in-out;
  -ms-transition: opacity 0.6s ease-in-out;
  -o-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;

}

.image_holder li:hover .cover{left:0px;
-webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
  opacity:0.5;
  -webkit-transition: opacity 0.6s ease-in-out;
  -moz-transition: opacity 0.6s ease-in-out;
  -ms-transition: opacity 0.6s ease-in-out;
  -o-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
}

.image_holder li:hover .cover_content{left:0px;
-webkit-opacity: 1;
  -moz-opacity: 1;
  filter:alpha(opacity=100);
  opacity:1;
  -webkit-transition: opacity 0.6s ease-in-out;
  -moz-transition: opacity 0.6s ease-in-out;
  -ms-transition: opacity 0.6s ease-in-out;
  -o-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;  
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................