Sexy Image Hover Effects using CSS3

by on 11/05/10 at 6:20 pm

First of all thanks to giving me a great response on Ajax Style Loading Animation in CSS3 ( no Images ) .
In this post I am going to show to How to create a sexy css effect on image hover.This kinda effect you have seen before in Flash or in javascript as well.But why use Flash or js when CSS can do the same work.So lets do it …
Below I have attached the snapshot , to view the original output please visit DEMO.

Loading Images

Now let go through the code.

HTML

<div class='img' id='img-1'>
	<div class='mask'></div>
	<img src='http://www.nikesh.me/image/01.jpg' />
</div>	
<div class='img' id='img-2'>
	<div class='mask'></div>
	<img src='http://www.nikesh.me/image/07.jpg' />
</div>
<div class='img' id='img-3'>
	<div class='mask' id='mask-1'></div>
	<div class='mask' id='mask-2'></div>
	<img src='http://www.nikesh.me/image/05.jpg' />
</div>
<div class='img' id='img-4'>
	<div class='mask'></div>
	<img src='http://www.nikesh.me/image/04.jpg' />
</div>	
<div class='img' id='img-5'>
	<div class='mask'></div>
	<mg src='http://www.nikesh.me/image/06.jpg' />
</div>
<div class='img' id='img-6'>
	<div class='mask'></div>
	<img src='http://www.nikesh.me/image/08.jpg' />
</div>

CSS

.img{
	float:left;
	-webkit-transition-duration: 0.5s;
	}
.img img{
	padding:10px;
	border:1px solid #fff;
}
.img:hover{
	-webkit-transform:scale(0.8);
	-webkit-box-shadow:0px 0px 30px #ccc;
}	
.img .mask{
	width: 100%;
	background-color: rgb(0, 0, 0);
	position: absolute;
	height: 100%; 
	opacity:0.6;
	cursor:pointer;
	-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
	height:0%;	
}
#img-2:hover .mask{
	height:0%;	
	margin-top:130px;
}
#img-3 #mask-1 {
	width:50%;
}
#img-3 #mask-2{
	width:50%;
	margin-left:211px;
}
#img-3:hover #mask-1{
	width:0%;
}
#img-3:hover #mask-2{
	margin-left:430px;
	width:0%;
}
#img-4:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
}
#img-5:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateZ(750deg);
}

To view the original output please visit DEMO.
Hope you guys like these effects.Please don’t forget to drop your comments.

224 Responses to “Sexy Image Hover Effects using CSS3”

  1. Honsberg

    Jul 29th, 2016

    In this when we hover on product image a cool animation will occur. In this we don’t use any jquery or any other javascript library to do this. We will use only CSS3 transitions and box shadow to do this.

Leave a Reply