Sexy Image Hover Effects using CSS3
by nikesh 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.
Now let go through the code.
HTML
<div class='img' id='img-1'>
<div class='mask'></div>
<img src='/image/01.jpg' />
</div>
<div class='img' id='img-2'>
<div class='mask'></div>
<img src='/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='/image/05.jpg' />
</div>
<div class='img' id='img-4'>
<div class='mask'></div>
<img src='/image/04.jpg' />
</div>
<div class='img' id='img-5'>
<div class='mask'></div>
<mg src='/image/06.jpg' />
</div>
<div class='img' id='img-6'>
<div class='mask'></div>
<img src='/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.
30个诱人的 jQuery + HTML5 + CSS3 幻灯片,焦点图,图廊,照片墙,图片切换 – 在线收藏
Jun 14th, 2016
[…] Sexy Image Hover Effects using CSS3 […]
Librerías CSS para aplicar efectos hover a imágenes y otros elementos
Jul 22nd, 2016
[…] Sexy Image Hover Effects […]
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.
kurs makijażu
Nov 21st, 2016
Excellent post. Keep posting such kind of info on your site.
Im really impressed by your site.
Hello there, You have performed a great job. I’ll certainly digg it and in my view recommend to my friends.
I’m sure they will be benefited from this site.
Nicola
Jan 25th, 2017
Hi, I loved this hover effect. But the code there has an error or does not match the demo. In the html part there is an ‘i’ missing in the tag of the 5th image. And in the css part the -webkit-transform:scale(x); should be set to 1 in the hover part and 0.8 in the .img{}. Thanks a lot!