CodePen

HTML

            
              <div class="postthumb"> 
  <img src="http://www.relativepress.com/postthumb.jpg"/>
  <a href="http://www.google.com" class="overlay"></a>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .postthumb {
  position: relative;
  display: inline-block;
}

.postthumb img{
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.overlay:hover {
  background: url(http://www.relativepress.com/overlay.png);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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