Grow your CSS skills. Land your dream job.

Webkit Transition – “fade-in” background-image on hover?

  • # March 2, 2011 at 8:45 pm

    Should this be working? I want a fade transition to the hover image.

    #nav-main ul li.nav-portfolio a {
    background-image: url(images/nav-portfolio-base.jpg);
    width: 79px;
    -webkit-transition-property: background-image;
    -webkit-transition-duration: 1.0s;
    -webkit-transition-timing-function: ease-out;
    }

    #nav-main ul li.nav-portfolio a:hover {
    background-image: url(images/nav-portfolio-hover.jpg);
    width: 79px;
    }

    Any ideas?

    # March 3, 2011 at 9:28 am

    it’s currently not possible to transition background images or css3 gradients (since they’re treated as background images).

    # March 4, 2011 at 8:50 pm

    bummer.

    # December 22, 2012 at 1:00 pm

    This should do the job.

    #mydiv {
    transition: background-image 1s ease-in-out;
    background-image:url(“/firstimg.jpg”);
    }

    #mydiv:hover {
    background-image:url(“/secondimg.jpg”);
    }

    # December 22, 2012 at 5:40 pm

    Thank you!

    # April 28, 2014 at 2:28 pm

    It won’t work using multiple background images :(
    I just need my image overlayed with black 50%, so I need both background-images , but I need to fade the black to 0… the problem is I also can’t use pseudo-elements because they are already allocated :(

    I’m testing in Chrome 34.0.1847.116

    Anyone knows a workaround?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".