Sexy Image Hover Effects using CSS3

by 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.

Loading Images

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.

226 Responses to “Sexy Image Hover Effects using CSS3”

  1. [...] 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

  2. 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!

  3. [...] Sexy Image Hover Effects using CSS3 [...]

  4. anupal

    Aug 26th, 2011

    very nice luv them…

  5. [...] Sexy Image Hover Effects using CSS3 [...]

  6. [...] 1. Sexy Image Hover Effects using CSS3 [...]

  7. [...] Sexy Image Hover Effects using CSS3 [...]

  8. RakuX

    Sep 9th, 2011

    Wow this is outstanding. Love the smooth animations. Thanks!

    You discover something new everyday :)

  9. bad credit secured loans

    Sep 14th, 2011

    I like reading and I believe this website got some truly utilitarian stuff on it! .

  10. axmad

    Sep 21st, 2011

    sexsy image

  11. random_user

    Oct 6th, 2011

    You have a typo:

    tag is missing and “i”

  12. 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.

  13. 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.

  14. Kathryn Carrion

    Oct 28th, 2011

    What attractive place and that i really like the way you write your articles.

  15. [...] * *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 [...]

  16. Ram

    Nov 17th, 2011

    Mind Blowing!………….No words to describe

  17. 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?

  18. 5 Image Hover Effects

    Nov 24th, 2011

    [...] Sexy Image Hover Effects using CSS3 [...]

  19. 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 =)

  20. usman

    Dec 15th, 2011

    awesome hover

  21. aoso2

    Dec 17th, 2011

    Superior posting, beneficial web site, appreciate your job, go on, guys!

  22. [...] For the title and credit, I borrowed some CSS3 from Nikesh.me. [...]

  23. 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!

  24. programerNi

    Dec 21st, 2011

    nice product, i like it very much

  25. 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.

  26. [...] * *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 [...]

  27. 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?

  28. 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???

  29. 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

  30. Prodyot

    Jan 14th, 2012

    Very cute and very useful.
    Thanks for sharing.

  31. Dog Training Guides

    Jan 29th, 2012

    I hate trying to figure out all the IE workarounds!

  32. meet greet bristol

    Feb 7th, 2012

    what’s up, major blog on top information. Very informative. similar Thanks.

  33. devenir

    Feb 19th, 2012

    I really like your writing style, wonderful information, appreciate it for posting :D.

  34. Amos Leffelman

    Feb 29th, 2012

    Pretty! This has been a really wonderful post. Thank you for supplying this info.

  35. harish

    Feb 29th, 2012

    good creativity buddy.plz contribute more

  36. 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.

  37. Rosenda Earnheart

    Mar 20th, 2012

    Interesting article. Certain that I’ll come back here. Very good work. Best Regards

  38. 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…

  39. 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.

  40. Secret Design

    Apr 13th, 2012

    Very nice effect. Thanks for sharing.

  41. [...] Read Tutorial : Sexy Image Hover Effects using CSS3 [...]

  42. [...] Image Hover Effects Using CSS3 [...]

  43. 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?

  44. Warner Costley

    Apr 28th, 2012

    I really enjoyed this post! Many Thanks!

  45. 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

  46. 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

Leave a Reply