CodePen

HTML

            
              <div id="postthumb">
  <div id="postthumbimg">
    <a href="#"><img src="http://www.relativepress.com/postthumb.jpg" /></a>
  </div>
                    <div id="overlay">
                            <a href="#">Read More</a>
                    </div>
                </div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #postthumb {
  width: 282px;
  height: 152px;
}

#postthumb #overlay {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 282px;
  height: 152px;
  text-align: center;
}

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

JS

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