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

    Aug 21st, 2010

    Great Work…. Nice Demo…
    Keep Rocking…

  2. [...] Sexy Image Effets Hover utilisant CSS3 Ce post montre comment créer un effet sexy CSS hover sur l’image. [...]

  3. Nilesh

    Aug 30th, 2010

    really nice work!!

  4. Petty

    Sep 3rd, 2010

    Awesome!

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

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

  7. rickzwebz

    Sep 25th, 2010

    Nice effects. I will try to adapt this for some of my sites. Thanks.

  8. [...] now We all have seen lots of image effect developed in CSS3 like Sexy Image Hover Effects. But today I am going to show a very different image effect using only CSS3.Previously this kind of [...]

  9. [...] ≫Sexy Image Hover Effects using CSS3 – nikesh.me [...]

  10. [...] Sexy Image Hover Effects using CSS3 一个漂亮的图片悬停效果。 [...]

  11. tommy

    Dec 2nd, 2010

    It’s beautiful. will try it

  12. Elijah

    Dec 13th, 2010

    Thanks! Nice Effects, Any hack for IE and Mozilla ?

  13. [...] = "0704558884"; google_ad_width = 300; google_ad_height = 250; 1) Introduction-to-css32) Image Hover Effects Using CSS33) Get Started With_CSS34) CSS3 Dropdown Menu5) 11 Classic CSS Techniques Made Simple With CSS36) [...]

  14. Bloons Man

    Jan 16th, 2011

    Very nice effect. Will work excellently on my game blog.

  15. [...] Sexy Image Hover Effects [...]

  16. Varsha

    Feb 19th, 2011

    I’ve used sexy image hover effect in my project, and it is working superb.. thanx for uploading this.. it’s wonderful and helped me a lot.

  17. Will

    Feb 28th, 2011

    Well done, looks very sleek..

  18. Phillip

    Mar 9th, 2011

    truly sexy, indeed..

  19. ryan

    Mar 16th, 2011

    Not work in IE8 and IE7 but anyway is helpful..
    good work.

  20. [...] In this tutorial, you will use CSS transform transition and CSS features to rotate the image by just clicking the small image. Visit Site [...]

  21. rax

    Mar 20th, 2011

    hey diude !
    it is just awesome !!
    and light weight also ! :)
    thanks a lot !

  22. Jeremy

    Mar 25th, 2011

    nice effect! by the way, check your on the top-level of the site. :)

  23. Jeremy

    Mar 25th, 2011

    title tag, it says ‘protfolio’.

  24. Ramaraju Ramakanth

    Mar 26th, 2011

    Great Work..

  25. mj

    Mar 30th, 2011

    Awesome man. Nice tips. Thanks ya.

  26. kopiteAvi

    Apr 7th, 2011

    lovin’ it….superb…awesum!! :D

  27. veeresh

    Apr 13th, 2011

    It’s very fantastic………..

  28. sv kumar

    May 4th, 2011

    super….

  29. cellunlock

    May 5th, 2011

    http://www.nikesh.me is full of interesting posts!

  30. Dot Bushman

    May 22nd, 2011

    I love this stuff….just wish I knew how to use it.
    Yes….I’m not a developer.

  31. [...] Sexy Image Hover Effects [...]

  32. li

    Jun 6th, 2011

    works on opera browser, too ;)

  33. Lathe

    Jun 16th, 2011

    This is a extremely fascinating post, thank you for sharing! There are many blogs on this topic but this 1 states exactly what I believe also.

  34. daus

    Jun 18th, 2011

    this is what i looking for, thanks

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

  36. batterie e percussioni

    Jul 23rd, 2011

    Fine piece! Prefer was pleased with the particular checking out. I’m hoping to enjoy a book significantly more of your stuff. There’s no doubt you can have fine observation not to mention perspective. We’re significantly happy from this knowledge.

  37. [...] Sexy Image Hover Effects using CSS3 一个漂亮的图片悬停效果。 [...]

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

  39. rajesh kumar

    Jul 26th, 2011

    very nice….

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

  41. [...] Imagen con efectos hover con CSS3 [...]

  42. chins

    Aug 3rd, 2011

    it wont work in IE7,IE8.Then Is it work in firefox?

  43. [...] View the Demo | Sexy Image Hover Effects using CSS3′s Details [...]

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

Leave a Reply