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

    May 11th, 2010

    Hi nice demo,
    but it only works on webkit, not opera or firefox. CSS3 Transitions works on Firefox 3.7+, Opera 10.50+ .

    To fix the compatibility, you can use -moz- and -o- property like here : http://blog.grenlibre.fr/2010/05/css3-transitions-available-on-firefox-3-7

    Regards

  2. Portnull

    May 11th, 2010

    AWESOME!

  3. Philipp von Weitershausen

    May 11th, 2010

    This is a nice demo! Note that Firefox also supports CSS transformations (-moz-transform*) since version 3.5 and supports transitions (-moz-transition*) on the trunk (3.7 alpha). See https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

    • Alex

      May 16th, 2010

      wow…firefox now sounding like internet explorer. sad you have to do something particularly to debug firefox. Why can’t all these companies get on board and stay on board the standards train?

      • Arcane

        Jun 30th, 2010

        LOL. Bear in mind that these effects are possible on Webkit thanks to the -webkit prefix because these effects are NOT standard. These companies are offering pre-standards methods for including them. Once w3 finalizes their usage, webkit and gecko browsers will probably switch over.

      • David B.

        Jul 1st, 2010

        You’re trolling, right Alex? Webkit does the exact same thing Mozilla Gecko does. Webkit uses -webkit and Gecko uses -moz (while we’re at it, Opera’s Presto uses the -o prefix).

    • Mae

      Aug 8th, 2010

      That’s weird, I tried using -moz-transition* but it didn’t work on me. I read in the documentation that it will be implemented in Firefox 4 :(

  4. Mike

    May 11th, 2010

    One all major browsers support CSS3 life for web designers is going to be a lot easier. These effects are great!

  5. Steve jobs is full of shit

    May 11th, 2010

    If building a simple effect like this is such a big deal using non-flash thingies, imagine building 3D sites in js!

    Cross browser compatibility is a bitch and it will ensure that Flash will survive for a long long time. Anyone tried running simple html5 demos on iPad. That pad cant.Steve jobs is full of shit!

    • Chris Alford

      May 12th, 2010

      How dumb are you!
      Anyone in this business knows how much a pain cross browser coding is. Flash was a good tool back in the Macromedia days, but it is buggy, insecure and for the designers it was originally built for, difficult to program in.
      HTML 5 is a big step in the right direction, the iPad is a huge leap in personal computing.
      If you want to stay employed learn something new and keep your bigoted personal opinions to yourself.

  6. Lukasz Langa

    May 11th, 2010

    Very cool but… how are you supposed to see a hover effect on the iPhone? :P

  7. [...] Sexy Image Hover Effects using CSS3 | Nikesh Hayaran’s Blognikesh.me [...]

  8. dave

    May 11th, 2010

    Works on the Droid incredible fwiw.

  9. tjoozey

    May 11th, 2010

    [...] full post on Hacker News If you enjoyed this article, please consider sharing it! Tagged with: Beautiful [...]

  10. === popurls.com === popular today…

    yeah! this story has entered the popular today section on popurls.com…

  11. [...] the original post: Sexy Image Hover Effects using CSS3 | Nikesh Hayaran’s Blog 11 May 2010 | Uncategorized | Trackback | del.icio.us | Stumble it! | View Count : 0 Next Post [...]

  12. macoteca

    May 11th, 2010

    Great FX. If Explorer 6 (the first step) disappears Internet is going to be faster: rounded corners, fx, layers, fontface… CSS3 rocks and works really fast to make some stuffs.
    Thanks for the post, I like it.

  13. Jimmy Bradford

    May 12th, 2010

    Some good stuff there. I like the little dark grey overlay sort of thing that also animates while the selected image is growing. I think we’re going to be using a few of these techniques to spice up the site when http://www.dirtyphonebook.com gets photos in order to minimize bandwidth with horrible (IMO) flash solutions. I just wish there was a little more IE support though but we’re doing good with getting modern browser users so that’s not a crazy large concern. Good writeup and demo nikesh!

    • nikesh

      May 12th, 2010

      @ All …. a very big thanks to all of my readers…. nd I also appreciate those who put their suggestions here ..
      @jimmy … thanks man … I always tried to give some thing new to my readers ,,,, hope in future, you ll get some more useful article here which you can use for your website …

  14. Neil

    May 12th, 2010

    Good effect. Some of these commenters are kidding themselves if they think something like this will be a viable option (outside of the mobile web) within the next 5 years.

  15. mantiddesign

    May 12th, 2010

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

  16. [...] Sexy Image Hover Effects using CSS3 – nikesh.me (tags: css3 webdesign) [...]

  17. Utwo

    May 16th, 2010

    Hey nice tutorial.You have a little problem with cursor:pointer.

  18. Richie

    May 16th, 2010

    This is excellent work.. Nicely done Nikesh!!

  19. nikesh

    May 16th, 2010

    @Richie …. thanks a lot richie ….

  20. Jacob

    May 17th, 2010

    Looks and works great on tap when using my g1.

  21. [...] artígo nosso amigo do site nikesh encina como criar um efeito css sexy quando fazemos hover em alguma imagem. Você pode ter visto [...]

  22. jeienne

    May 18th, 2010

    It’s nice. But i wish to put in main page of my preparing site with wordpress, how to do, please some get me know.

    Thanks.

  23. [...] use of css/javascript transitions for hover effects. Continue reading » · Written on: 05-18-10 · No Comments [...]

  24. liukaitian

    Jun 9th, 2010

    很棒的效果,值得支持

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

  26. [...] 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 of effect is usually built with Flash or Javascript, but why use Flash or js when CSS can do the same work. Sexy Image Hover Effects using CSS3 » View the Demo » [...]

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

  28. [...] HTMl5 and CSS3 and cut out javascript and Flash all together. A demo of how this works is located here, although again it works best in Chrome and [...]

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

  30. [...] Sexy Image Hover Effects using CSS3 This post shows how to create a sexy CSS effect on image hover. [...]

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

  32. [...] Sexy Image Hover Effects using CSS3 This post shows how to create a sexy CSS effect on image hover. [...]

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

  34. [...] hiệu ứng khi áp dụng cả 2 kỹ thuật này. Animated Photoshop selection using CSS3 Sexy Image Hover Effects using CSS3 CSS3 Dropdown Menu Middle Box Links Contextual Slideout Tips With jQuery & CSS3 CSS3 [...]

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

  36. [...] HTMl5 and CSS3 and cut out javascript and Flash all together. A demo of how this works is located here, although again it works best in Chrome and [...]

  37. [...] Sexy Image Hover Effects using CSS3 This post shows how to create a sexy CSS effect on image hover. [...]

  38. [...] Sexy Image Hover Effects using CSS3 This post shows how to create a sexy CSS effect on image hover. [...]

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

  40. erwt

    Jun 27th, 2010

    supperrr

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

  42. soulkillr

    Jul 6th, 2010

    Awesome.
    Chrome 5+ perfect.
    Linux, BTW!

  43. Cody Swann

    Jul 7th, 2010

    Great tut.

    I think there is a bit of non-semantics going on, but I understand the need.

    Throw modernizr in there and just remove the mask for non-transition browsers

    .no-transitions .mask {

    }

  44. [...] Δείτε το Demo [...]

Leave a Reply