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.
CSS3 Tutorial and Resources | Avazio
Aug 17th, 2011
[...] CSS3 border images • CSS3 background images • Flash-style image effect using CSS3 • Image hover effects using CSS3 • Creating a Polaroid photo viewer with CSS3 and jQuery • Smooth fading image captions with [...]
amberen reviews
Aug 18th, 2011
You really make it seem really easy with your presentation however I in finding this matter to be really one thing that I feel I might never understand. It kind of feels too complex and very extensive for me. I’m looking ahead in your subsequent put up, I will attempt to get the hang of it!
45+ Handy CSS3 Tools, Tutorials and Resources | CS5 Design
Aug 23rd, 2011
[...] Sexy Image Hover Effects using CSS3 [...]
anupal
Aug 26th, 2011
very nice luv them…
20 HTML5 And CSS3 Tips,Tutorials, Demo & Download : DesignMock
Aug 28th, 2011
[...] Sexy Image Hover Effects using CSS3 [...]
29+ Interesting CSS3 Tutorials | Pixel2Pixel Design
Aug 29th, 2011
[...] 1. Sexy Image Hover Effects using CSS3 [...]
10款纯CSS3图像滑动和画廊效果 » 虾子酱油学习网页设计
Sep 3rd, 2011
[...] Sexy Image Hover Effects using CSS3 [...]
RakuX
Sep 9th, 2011
Wow this is outstanding. Love the smooth animations. Thanks!
You discover something new everyday
bad credit secured loans
Sep 14th, 2011
I like reading and I believe this website got some truly utilitarian stuff on it! .
axmad
Sep 21st, 2011
sexsy image
random_user
Oct 6th, 2011
You have a typo:
tag is missing and “i”
austin gutter installation
Oct 27th, 2011
Yep, you got me. I came in a bit skeptical because of the title, but you’re right, these are in fact some majorly sexy images.
Kathryn Carrion
Oct 28th, 2011
What attractive place and that i really like the way you write your articles.
Ram
Nov 17th, 2011
Mind Blowing!………….No words to describe
turbo turbine
Nov 17th, 2011
Great effects, but doesn’t work in IE8 and IE9 (these are the ones I tested for, most likely won’t work for ie7 and ie6). Any workarounds?
5 Image Hover Effects
Nov 24th, 2011
[...] Sexy Image Hover Effects using CSS3 [...]
amberen
Nov 28th, 2011
Terrific work! That is the kind of info that should be shared around the net. Shame on Google for no longer positioning this post upper! Come on over and consult with my web site . Thanks =)
usman
Dec 15th, 2011
awesome hover
aoso2
Dec 17th, 2011
Superior posting, beneficial web site, appreciate your job, go on, guys!
html5 video experimentation « Philosophy « Jac de Haan
Dec 17th, 2011
[...] For the title and credit, I borrowed some CSS3 from Nikesh.me. [...]
We Buy Any Houses For Loan Balance !
Dec 17th, 2011
A person necessarily help to make severely articles I’d state. This is the first time I frequented your web page and to this point? I surprised with the analysis you made to create this actual put up extraordinary. Magnificent task!
programerNi
Dec 21st, 2011
nice product, i like it very much
Rhett Brightwell
Dec 22nd, 2011
Nice post. I study something tougher on completely different blogs everyday. It will always be stimulating to read content material from different writers and observe just a little one thing from their store. I’d choose to make use of some with the content material on my blog whether you don’t mind. Natually I’ll offer you a hyperlink in your internet blog. Thanks for sharing.
Jessie J
Dec 27th, 2011
This is great! Thanks for sharing. I prefer not to slow down my sites with too much js or flash, so this is definitely something I’d love to implement. Unfortunately, you still need a workaround for IE
stu
Jan 6th, 2012
this div is awsome but im having trouble with the 2nd line of pics. I am just using image 3 actions with the 2 masks and have various pics using the code from above. The problem is that the 2nd row of pics dont animate at all…. i have tried setting the 2nd line of pics into separate css code, ive also tried closing the div and starting it again under a <li… ive added <br to split it up but nothing!!… can you or anyone else help with this please???
Ankit
Jan 14th, 2012
wonderful technique… it will be very helpful if you could guide me on how to implement this image hovering on a sliding page where everything is in CSS
Prodyot
Jan 14th, 2012
Very cute and very useful.
Thanks for sharing.