CodePen

HTML

            
              <a>
  <img src="http://placehold.it/230x300">
  <!-- the hover effect --> 
  <div class="shown-when-hover">
      This is visible when hovering over it.
    </div>
  </a>
            
          
!
via HTML Inspector

CSS

            
              a .shown-when-hover {
  /* Display none, overridden when the a is hovered over */
  display: none;
  
  /* Absolute positioning to make it fill out every bit
  of the containing link */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Slightly transparent background so the picture shows */
  background: rgba(0, 0, 0, 0.5);
}

a:hover .shown-when-hover {
  /* display block when the link is being hovered over */
  display: block; 
}

a { 
  /* These three are important for containing the hover */
  display: block;
  position: relative;
  overflow: hidden;
  
  /* These two are the dimension of the image, to contain
  the hover effect*/
  width: 230px;
  height: 300px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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