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.


<div class='img' id='img-1'>
        <div class='mask'></div>
        <img src='/image/01.jpg' />
<div class='img' id='img-2'>
        <div class='mask'></div>
        <img src='/image/07.jpg' />
<div class='img' id='img-3'>
        <div class='mask' id='mask-1'></div>
        <div class='mask' id='mask-2'></div>
        <img src='/image/05.jpg' />
<div class='img' id='img-4'>
        <div class='mask'></div>
        <img src='/image/04.jpg' />
<div class='img' id='img-5'>
        <div class='mask'></div>
        <mg src='/image/06.jpg' />
<div class='img' id='img-6'>
        <div class='mask'></div>
        <img src='/image/08.jpg' />


        -webkit-transition-duration: 0.5s;
.img img{
        border:1px solid #fff;
        -webkit-box-shadow:0px 0px 30px #ccc;
.img .mask{
        width: 100%;
        background-color: rgb(0, 0, 0);
        position: absolute;
        height: 100%; 
        -webkit-transition-duration: 0.5s;
#img-1:hover .mask{
#img-2:hover .mask{
#img-3 #mask-1 {
#img-3 #mask-2{
#img-3:hover #mask-1{
#img-3:hover #mask-2{
#img-4:hover .mask{
#img-5:hover .mask{
        -webkit-transform: rotateX(360deg);
#img-6:hover .mask{
        -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. WordPress Designer

    Jun 7th, 2012

    I need with lightbox…. :(

  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-


  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. 7个最新的使用jQuery及其CSS实现的悬浮特效 | CSSwang-CSS网站

    Jul 31st, 2012

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

    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. 45+ Handy CSS3 Tools, Tutorials and Resources | Tekki Web Solutions Pvt. Ltd.

    Sep 29th, 2012

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


  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. Handy CSS3 Tools, Tutorials and Resources : HueDesigner

    Jan 5th, 2013

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

  22. 10 CSS3 technology picture albums and slider sliding effect Web Page Design | Web Page Design Templates | Html5 Template

    Feb 3rd, 2013

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

  23. 7 个基于CSS/JavaScript的鼠标悬停效果教程 | jQuery精品集 -

    Feb 6th, 2013

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

  24. Nishant Joshi

    Feb 25th, 2013

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

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

  26. mmcsus

    Mar 6th, 2013


  27. 011012

    Apr 2nd, 2013


    very nice, just what i need

  28. 10 Awesome Pure CSS3-Only Image Galleries & Sliders | AuntWeb

    Apr 10th, 2013

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

  29. Muhammad Kashif

    Apr 15th, 2013

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

  30. maniraj

    May 1st, 2013


  31. 12 Useful CSS3 Tutorials And Techniques For Web Designers

    Jun 24th, 2013

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

  32. 40+ New Significant HTML5 And CSS3 Tips/Techniques/Tutorials | Multy Shades

    Sep 13th, 2013

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

  33. HTML5 CSS3 Image galleries - Nilesh Shiragave PHP | Wordpress Expert

    Jan 2nd, 2014

    [...] Demo Download [...]

  34. 30 Tutorials to Help You Master CSS3

    Jan 31st, 2014



    Mar 17th, 2014


  36. ashish

    Apr 9th, 2014

    very nice, just what i need

  37. See more

    Apr 15th, 2014

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

  38. a

    Jun 19th, 2014

    This is my first time pay a visit at here and i am truly impressed to
    read everthing at alone place.

  39. abraham

    Jul 15th, 2014

    buena demo pero me interesaría que me pudieras mandar todo el css y html creado agradesco tu apoyo

  40. Tutorials for learning about CSS Hover Effects | TechBlog

    Sep 13th, 2014

    […] Hover Effects How to Create a Fast Hover Slideshow with CSS3 CSS Powered Buttons with Hover TooltipsSexy Image Hover Effects using CSS3Caption Hover […]

  41. 30 Best Tutorials and Plugins to Create Hover Effect in CSS3 - Xz webdesign

    Oct 3rd, 2014

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

  42. Inspiration

    Nov 16th, 2014

    Simply awesome. Nice effects.

  43. Оригинальные hover-эффекты для изображений на чистом CSS3 | Dobrovoimaster

    Nov 25th, 2014

    […] ДемоДетали […]

  44. Hover Effects | Hiệu ứng di chuột lên trên - YOEN GroupYOEN Group

    Dec 1st, 2014

    […] [Demo] – [Tutorial] […]

  45. Benergy Sam

    Dec 9th, 2014

    Very very useful for me thanks

  46. 45+ Handy CSS3 Tools, Tutorials and Resources - Taug13

    Feb 13th, 2015

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

  47. 24个CSS3实例教程 | iCoding

    Mar 23rd, 2015

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

  48. Best 14 JQuery & CSS3 Hover Effects - Inspect Magazine

    May 26th, 2015

    […] Demo    Download […]

  49. Image Hover Effect Tutorial For jQuery and CSS3 2 - DevsTrend

    Jun 18th, 2015

    […] View Sourch […]

  50. Оригинальные hover-эффекты для изображений на чистом CSS3 | ITC-LIFE

    Nov 10th, 2015

    […] ДемоДетали […]

Leave a Reply