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.

204 Responses to “Sexy Image Hover Effects using CSS3”

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

    • pipi

      Nov 25th, 2013

      Ya same problem….

    • Toasticuss

      Feb 28th, 2014

      This works fine with lightbox, just wrap the img tags in hrefs light you would with lightbox links.

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

  3. gagan

    Jun 30th, 2012

    nice awesome

  4. Thilina

    Jul 21st, 2012

    can,t use position:fixed; style….. plz help

  5. intelprotin4

    Jul 25th, 2012

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

  6. 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. [...] Amazing Image Hover Effects with Webkit and CSS 3另外一个使用CSS3实现的悬浮特效。 Sexy Image Hover Effects using CSS3一个非常酷的CSS3实现的悬浮特效。拥有非常酷的展示方式。 Snazzy Hover [...]

  8. denikian

    Sep 3rd, 2012

    awesome but i need with responsive Theme

  9. CPC Studio

    Sep 5th, 2012

    Nice… i luv it.. do you have this code with responsive layout?

  10. nikesh

    Sep 5th, 2012

    @denikian n @cpc …. guys you have to do it by your self ..

  11. kapil

    Sep 8th, 2012

    Hey dude too cool
    where from you learned these effects

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

  13. Akanksha

    Sep 23rd, 2012

    Is this htmls 5 supportive?

  14. Dibyendu Layek

    Sep 29th, 2012

    excellent , thanks……

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

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

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

  18. Dhananjay

    Nov 6th, 2012

    nice look & feel with CSS

  19. chnadn kumar

    Nov 13th, 2012

    nice

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

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

  22. Nishant Joshi

    Feb 25th, 2013

    This effect is all messed up in IE.
    Can’t use it.
    :’(

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

  24. mmcsus

    Mar 6th, 2013

    Cool!

  25. 011012

    Apr 2nd, 2013

    thx

    very nice, just what i need

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

  27. Muhammad Kashif

    Apr 15th, 2013

    I would like to say that….simply awesome… hats off dude…..

  28. maniraj

    May 1st, 2013

    Good..

  29. [...] are again with 10 best and useful css3 Tutorials and technique for web designers.[re] [rss] [ad1]1) Image Hover Effects Using CSS32) Get Started With_CSS33) CSS3 Dropdown Menu4) 11 Classic CSS Techniques Made Simple With CSS35) [...]

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

  31. […] AMAZING IMAGE HOVER EFFECT […]

  32. FERNANDO

    Mar 17th, 2014

    MUY BUENA ..LOS EFECTOS..PERO TENGO UN PEQUEÑO PROBLEMA..EN TODOS LOS NAVEGADORES..FUNCIONA..MENOS EN INTRNET EXPLORER..PUEDO SABER A QUE SE DEBE ESO..???

  33. ashish

    Apr 9th, 2014

    thanks
    very nice, just what i need

  34. See more

    Apr 15th, 2014

    “Say, you got a nice blog post.Thanks Again. Really Cool.”

Leave a Reply