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 [...]
enyew
Feb 21st, 2012
it make seem easy but hard i tried it but it’s not worked
Steve
Mar 4th, 2013
It’s sooo amazing:-)! Thanks a lot.
But what have I to do, to make it run with Internet Explorer?
Can somebody help me?
Thanks
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! .
11个非常棒的CSS3实现的图片画廊[转] – 维美设计团队博客
Sep 20th, 2011
[...] Sexy Image Hover Effects [...]
axmad
Sep 21st, 2011
sexsy image
random_user
Oct 6th, 2011
You have a typo:
tag is missing and “i”
Alvina Leamer
Oct 21st, 2011
Attractive section of content. I just stumbled upon your weblog and in accession capital to assert that I get in fact enjoyed account your blog posts. Any way I’ll be subscribing to your feeds and even I achievement you access consistently fast.
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.
Photo Gallery for Your HTML5 Website – jQuery and CSS3 Tutorials | Template Monster Blog
Nov 8th, 2011
[...] * *How to Create a Fancy Image Gallery with CSS3* * *Animated Portfolio Gallery with jQuery* * *Sexy Image Hover Effects using CSS3* * *Minimalistic Slideshow Gallery with jQuery* * * Written by Lilian RigoLilian Rigo, an expert [...]
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 =)
Share seven latest implementation of the suspension effect using jQuery - Open News
Dec 13th, 2011
[...] Sexy Image Hover Effects using CSS3 [...]
usman
Dec 15th, 2011
awesome hover
aoso2
Dec 17th, 2011
Superior posting, beneficial web site, appreciate your job, go on, guys!
Gracyn
Aug 26th, 2014
Hauahlljle! I needed this-you’re my savior.
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.
Spectacular CSS3 Hover Effect Tutorials | Template Monster Blog
Dec 22nd, 2011
[...] * *Creating a hover effect on elements using CSS* * *Circle Navigation Effect with CSS3* * *Sexy Image Hover Effects using CSS3* * *Image Tint With CSS* * *Snazzy Hover Effects Using CSS* * *Create an Advanced CSS Menu Using [...]
ICTEA – Web Design » Blog Archive » Spectacular CSS3 Hover Effect Tutorials
Dec 22nd, 2011
[...] Sexy Image Hover Effects using CSS3 [...]
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
vikesh
Mar 5th, 2012
hi jessie,
did you manage to get a workaround to get this to work on 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.
Dog Training Guides
Jan 29th, 2012
I hate trying to figure out all the IE workarounds!
meet greet bristol
Feb 7th, 2012
what’s up, major blog on top information. Very informative. similar Thanks.
devenir
Feb 19th, 2012
I really like your writing style, wonderful information, appreciate it for posting :D.
Amos Leffelman
Feb 29th, 2012
Pretty! This has been a really wonderful post. Thank you for supplying this info.
harish
Feb 29th, 2012
good creativity buddy.plz contribute more
vikesh
Mar 5th, 2012
I love it. althoug i have 1 issue. What browser does it work in?
I have seen others but they dont work in IE.
Rosenda Earnheart
Mar 20th, 2012
Interesting article. Certain that I’ll come back here. Very good work. Best Regards
7个使用jQuery及其CSS实现的悬浮特效 | 莲娜用户体验研究日志 Lyna UED
Mar 24th, 2012
[...] Sexy Image Hover Effects using CSS3 [...]
Alene Lowenstein
Mar 25th, 2012
I really appreciate this post. I have been looking everywhere for this! Thank God I found it on Bing. You’ve made my day! Thx again…
deaths
Apr 5th, 2012
Great title, Sexy Image Hover Effects using CSS3 – nikesh.me, I could not refrain from commenting. Well written! I need to give you thanks for your hard work.
Gildas
Aug 26th, 2014
The paragon of unntiseandrdg these issues is right here!
Secret Design
Apr 13th, 2012
Very nice effect. Thanks for sharing.
85 The Most Useful CSS3 Tutorials | Bashooka
Apr 14th, 2012
[...] Read Tutorial : Sexy Image Hover Effects using CSS3 [...]
Ultimate Collection of CSS3 Tutorials and Techniques | CollegeGFX
Apr 20th, 2012
[...] Image Hover Effects Using CSS3 [...]
xuanchien247
Apr 27th, 2012
It’s very sexy, can you make it with javascript? If you can do it then can you make tutorial about it?
Warner Costley
Apr 28th, 2012
I really enjoyed this post! Many Thanks!
emma
May 8th, 2012
Hi Nikesh,
I am new to coding, and want to use this affect for a project for uni. Where in the code do I enter this code? Do I have to use both the html and css coding you have given?
Thanks
Ajay
Jun 6th, 2012
I have tried..it working fine in all browser except….would u please help me out to resolve issue related to IE..
Thanks