Forums

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!

treehouse : what would you like to learn today?

Forums

Webkit Transition - "fade-in" background-image on hover?