CSS

Sexy Image Hover Effects using CSS3

CSS3-image-hover

Today, we are going to show to How to create a sexy image hover effect with css..You have seen this kind of effect in Flash or in javascript as well. But if CSS can do the same work, why use Flash or js. So lets do it …
Below I have attached the snapshot , to view the original output please visit DEMO page.


Now let go through the code.

HTML

sexy image, sexy image, sexy image, sexy image, sexy css3, sexy css3, sexy css3
CSS

 

To view the original output please visit DEMO.
Hope you guys like these effects.Please don’t forget to drop your comments.
.sexy image css hover effect, sexy image css hover effect, sexy image, sexy image, sexy image

11 Comments

11 Comments

  1. Bob

    January 9, 2013 at 4:33 am

    looks good, but when applied for one pic only works oposite .. Instead zoom in, zoom out and whole mask bg is disturbing with each move of mouse 😉 But respect anyway, hombre, keep going!

  2. Beben Koben

    November 12, 2011 at 6:36 pm

    awesome my friend…it’s full stylish…
    on variable .img .mask we can just used background-color: rgba(0, 0, 0, 0.5)
    that’s same with opacity variable….

  3. Social media tips

    October 19, 2011 at 5:28 am

    Amazing technology development in CSS. but it’s allow only mozilla, chrome and etc browsers except internet explorer. this same css working in IE really happy to apply this css. by anand

    • designswonder

      October 19, 2011 at 7:22 am

      You must go through this article to understand which effects and transitions are supported by IE browser. These effects are created with Pure CSS3 technique. If you want to apply the same effects and want to see them working in IE also, then I would recommend you to go with jQuery. It is fast, cross-browser compatible and you can do what you want.

  4. Lonny Guieb

    October 13, 2011 at 1:23 pm

    Extremely great content. I actually basically became aware of your blog site and desired to tell you that I’ve quite liked looking through your blog and reports. Nonetheless I’ll be following your feed and I hope to browse your blog again.

  5. 10 best web hosting

    September 14, 2011 at 6:12 am

    Excellent post. I was checking constantly this blog and I am impressed! Extremely useful information specifically the last part :) I care for such info a lot. I was looking for this certain info for a very long time. Thank you and good luck.

  6. Febin

    May 30, 2011 at 11:48 pm

    this is awesome, thanks …

  7. ChesterJulie

    May 20, 2011 at 10:15 am

    Nice to see CSS3 put to use!This tutorial will no doubt help a lot of people to experiment with their site! Thanks for sharing, I’ve bookmarked it :)

  8. Sudo

    May 20, 2011 at 10:11 am

    You are a big man! Thanks for this (as always great) stuff

  9. GreenBot

    May 20, 2011 at 10:10 am

    This tutorial helped me with a website I am designing, thanks a lot!

  10. Alicia

    May 9, 2011 at 3:04 am

    I am amazed and shocked that these effects are only with Pure CSS3… It means, its time to say good bye to JS and flash. Use CSS3 and you'r done with it.
    But a little disappointment is that it's not working it IE(Any verison).
    Hopefully this will be fixed sooner by MS…
    All-in-all, Great post.

Leave a Reply

Your email address will not be published. Required fields are marked *

To Top

Get More Stuff Like This
IN YOUR INBOX

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

This information will never be shared for third part