CSS Fade Between Background Images on Hover
Is there a way that I can do the following?
I have a transparent png sprite that shows a standard picture on the left, and a picture for the :hover state on the right.
Is there a way that I can have the image fade from the left image into the right image on :hover using only css3 transitions? I've tried the following, but it doesn't work:
li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}
Now, the above does animate the background, it pans the image across. What I'd like instead of a pan is a fade or dissolve effect.
UPDATE: I ended up having to create two elements and just animate the opacities separately. It's a tad messy because I have to specify the exact margins of each element, but I guess it'll work. Thanks for everyones help :)
Answer
The latest news on this topic:
Chrome 19 and newer supports background-image transitions:
Demo: http://dabblet.com/gist/1991345
Additional info: http://oli.jp/2010/css-animatable-properties/