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='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.
WordPress Designer
Jun 7th, 2012
I need with lightbox….
ABDUL HASEEB
Jun 9th, 2012
i want source file of this in which all things are embeded please!!!
Val
Jun 18th, 2012
It does not work under Firefox 13. Borders do not look like they have to.
Reyz
Jun 18th, 2012
because nikesh wrote -webkit-box-shadow:0px 0px 30px #ccc;
-webkit- means for safari and chrome only
if u want to see in firefox
change all -webkit- with -moz-
CMIIW
gagan
Jun 30th, 2012
nice awesome
Thilina
Jul 21st, 2012
can,t use position:fixed; style….. plz help
intelprotin4
Jul 25th, 2012
[...] Sexy Image Hover Effects using CSS3 [...]
Jer
Jul 30th, 2012
The sixth image won’t work. When I hover over it the background gets all messed up and the images started flashing. Can you please help?
nikesh
Sep 3rd, 2012
its too late ..but if you still have the same issue … please share your code with me ….
7个最新的使用jQuery及其CSS实现的悬浮特效 | CSSwang-CSS网站
Jul 31st, 2012
[...] Amazing Image Hover Effects with Webkit and CSS 3另外一个使用CSS3实现的悬浮特效。 Sexy Image Hover Effects using CSS3一个非常酷的CSS3实现的悬浮特效。拥有非常酷的展示方式。 Snazzy Hover [...]
denikian
Sep 3rd, 2012
awesome but i need with responsive Theme
CPC Studio
Sep 5th, 2012
Nice… i luv it.. do you have this code with responsive layout?
nikesh
Sep 5th, 2012
@denikian n @cpc …. guys you have to do it by your self ..
kapil
Sep 8th, 2012
Hey dude too cool
where from you learned these effects
murtaza
Sep 20th, 2012
Its not working with IE also
If one can modify with
filter:progid:DXImageTransform.Microsoft
It would be a great help
Akanksha
Sep 23rd, 2012
Is this htmls 5 supportive?
Dibyendu Layek
Sep 29th, 2012
excellent , thanks……
45+ Handy CSS3 Tools, Tutorials and Resources | Tekki Web Solutions Pvt. Ltd.
Sep 29th, 2012
[...] Browser Support ChecklistThis tool displays web browser support on HTML5 and CSS3.CSS3 TutorialsSexy Image Hover Effects using CSS3In this post artist is going to show to How to create a sexy css effect on image hover.This kinda [...]
Laure Jagow
Oct 2nd, 2012
Hey There. I found your blog using msn. This is an extremely well written article. I will be sure to bookmark it and return to read more of your useful information. Thanks for the post. I’ll definitely comeback.
shraddha
Nov 1st, 2012
Can you please tell me how could you use this in photo gallary which is build using UL and LI and not DIV
Dhananjay
Nov 6th, 2012
nice look & feel with CSS
chnadn kumar
Nov 13th, 2012
nice
Vidya
Nov 28th, 2012
Looks stunning.
I tried this, but its not working properly.
When the page gets loaded, all the images comes up one by one within seconds and then, above that a black background.
Thats it….
Wt 2 do ?
Handy CSS3 Tools, Tutorials and Resources : HueDesigner
Jan 5th, 2013
[...] Sexy Image Hover Effects using CSS3 [...]
10 CSS3 technology picture albums and slider sliding effect Web Page Design | Web Page Design Templates | Html5 Template
Feb 3rd, 2013
[...] Sexy Image Hover Effects using CSS3 [...]
7 个基于CSS/JavaScript的鼠标悬停效果教程 | jQuery精品集 - macapps.asia
Feb 6th, 2013
[...] 5. Sexy Image Hover Effects using CSS3 [...]
Nishant Joshi
Feb 25th, 2013
This effect is all messed up in IE.
Can’t use it.
:’(
David
Feb 26th, 2013
Hey, nice work! Thank you for taking the time and having the generosity to share your work. No complaints or questions here, only gratitude.
mmcsus
Mar 6th, 2013
Cool!
011012
Apr 2nd, 2013
thx
very nice, just what i need
10 Awesome Pure CSS3-Only Image Galleries & Sliders | AuntWeb
Apr 10th, 2013
[...] with only pure CSS3, this article will show you how. Image Slider With Pure CSS3 » View the Demo »Sexy Image Hover Effects using CSS3 In this post you are going to be shown how to create a sexy CSS3 effect on image hover. This kind [...]
Muhammad Kashif
Apr 15th, 2013
I would like to say that….simply awesome… hats off dude…..
maniraj
May 1st, 2013
Good..