Fancy Image Hover Using CSS3

June 13th

64 Comments

So here we will try to create fancy image hover with css3 as you all know we can have cool image hover effect using jquery but now using transform and transition properties of css3 we can have the same cooler effect with css3 only.

Check Out Demo First (Works in Safari and Chrome only)

HTML

In html elements we need one container for image which holds the image along with the layer which would come on the top of image. So here we will first define a class images and id arrt. as image1 and now under this element there are two more elements one the layer and one image. So this way write html elements for all images.

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

CSS3

Here we will first use Transform property of css3 just to scale the image to smaller first when page loads and then on hover we will increase its size to larger than the previous one. Now here we will also use Transition Duration property to half second to perform the transform animation. That is on hover the image takes half second to animate from smaller size to bigger size. We also need to clear the layer which was on the top of all images, so as soon as cursor hover on any image we need to remove the layer mask from it in cooler way. To do this we will use Transition Duration property which will set the time duration for layer to remove from the image. Now will individually set different properties on layer so that we will get different hover effect on each images. Check out the below CSS3 Codes for more clarification.

.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%;
}