Today, we are going to show to How to create a sexy image hover effect with css..You have seen this kind of effect in Flash or in javascript as well. But if CSS can do the same work, why use Flash or js. So lets do it …

Below I have attached the snapshot , to view the original output please visit DEMO page.


Now let go through the code.

HTML

<div class='img' id='img-1'>
 <div class='mask'></div>
 <img src='http://designstutorial.com/wp-content/uploads/2011/05/01.jpg' />
</div>
<div class='img' id='img-2'>
 <div class='mask'></div>
 <img src='http://designstutorial.com/wp-content/uploads/2011/05/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://designstutorial.com/wp-content/uploads/2011/05/05.jpg' />
</div>
<div class='img' id='img-4'>
 <div class='mask'></div>
 <img src='http://designstutorial.com/wp-content/uploads/2011/05/04.jpg' />
</div>
<div class='img' id='img-5'>
 <div class='mask'></div>
 <mg src='http://designstutorial.com/wp-content/uploads/2011/05/06.jpg' />
</div>
<div class='img' id='img-6'>
 <div class='mask'></div>
 <img src='http://designstutorial.com/wp-content/uploads/2011/05/08.jpg' />
</div>

sexy image, sexy image, sexy image, sexy image, sexy css3, sexy css3, sexy css3
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.
.sexy image css hover effect, sexy image css hover effect, sexy image, sexy image, sexy image

Author

Founder of DesignsTutorial.com, an author, blogger, designer, and SEO expert who designs and develops websites as a freelancer. Offcourse, you can follow me on Twitter @designstutorial.