<div class='images' id='image1'> <div class='layer'></div> <img src='baby.jpg' /> </div> <div class='images' id='image2'> <div class='layer'></div> <img src='baby.jpg' /> </div> <div class='images' id='image3'> <div class='layer'></div> <img src='baby.jpg' /> </div> <div class='images' id='image4'> <div class='layer'></div> <img src='baby.jpg' /> </div>
The Css code is here
.images{ float:left; margin-left:-20px; margin-right:-20px; margin-top:10px; -webkit-transform:scale(0.6);/*Initial size of image when page loads*/ -webkit-transition-duration: 0.5s;/*Time taken for image to animate from smaller size to bigger size*/ } .images:hover{ -webkit-transform:scale(0.8);/*When hover on images image size will increased*/ -webkit-box-shadow:0px 0px 40px #ccc; } .images .layer{ width: 100%; height: 100%; background-color:#000; position: absolute; opacity:0.5; -webkit-transition-duration: 0.8s; } #image1:hover .layer{ width:0%; } #image2:hover .layer{ height:0%; } #image3:hover .layer { height:0%; margin-top:150px; } #image4:hover .layer{ margin-left:150px; margin-top:150px; height:0%; width:0%; }
The code is copied from the following location http://webdesignersdesk.com/2010/06/fancy-image-hover-using-css3/