CodePen

HTML

            
              <div id="postthumb">
                    <div id="postthumbimg">
                        <a href="#"><img src="images/postthumb.jpg" /></a>
                    </div>
                    <div id="postthumboverlay">
                            <a href="#">Read More</a>
                    </div>
                </div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #postthumb #overlay {
  opacity: 0;
  background: url(../images/overlay.png) scroll;
  position: absolute;
}

#postthumb a:hover #overlay {
  transition: opacity 150ms ease-in-out 0s;
  position: absolute;
  opacity: 1;
  background: url(../images/overlay.png) scroll;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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