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

[TreeTopStudio]

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?

[jimsilverman]

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

[TreeTopStudio]

bummer.

[siniradam]

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”);
}

[TreeTopStudio]

Thank you!

[socialblogsite]

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?

[Author]

Posts