CSSPortal Playground Examples

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
	.box { 
	    border:1px solid #ccc;
	    padding:5px;
	    height:151px;
	    width:195px;
	}
	.overlay {  
	    background:rgba(0, 0, 0, .75);
	    text-align:center;
	    opacity:0;	  
	    width:100%;height:100%; 
	    -webkit-transition: all 0.3s ease-in-out;
	    -moz-transition: all 0.3s ease-in-out;
	    -o-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	    transition: all 0.3s ease-in-out;
	}
	.box:hover {
	    border:1px solid #555;
	    border-radius:5px;
	}
	.box:hover .overlay {
	    opacity:1;
	}
	.search {
	    position:relative;
	    top:60px;
	}
    </style>
  </head>
  <body>
    <h1>Image Overlay Example</h1>
	<div class="box" style="background:url(images/83.png) no-repeat 50% 50%;">
	  <a href="#"><div class="overlay">
	    <span class="search"><img src="images/search.png"></span>
	  </div></a>
	</div>
  </body>
</html>