Image hivering with slider effects

<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/