CodePen

HTML

            
              <a href="#" class="something">
  <img src="http://themejug.com/demo/galao/files/2012/08/vault-icon-460x460.png" />
  
  <div class="overlay">
    <span><a href="http://google.com">Google</a></span>
  </div>
</a>
            
          
!

CSS

            
              body {margin: 25px;}

.something {
  position: relative;
  display: table;
  width: 460px;
  height: 460px;
  margin: 0 auto;
}

img {width: 100%; height: auto;}

.overlay {
  position: absolute;
  display: table;
  width: 420px;
  height: 420px;
  top: 0;
  left: 0;
  background: rgba(255,255,255,.85);
  margin: 20px;
  padding: 0;
  
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s linear;
}

.something:hover .overlay { 
  visibility: visible;
  opacity: 1;
  transition: all 0.2s linear;
}

.overlay span {
  display: table-cell;
  font: bold 25px sans-serif;
  text-align: center;
  vertical-align: middle;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Image by: http://themejug.com/demo/galao
// CSS by Chris Burton and Derek Fogge
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................