CSS3 background image transition

Question

I\'m trying to make a \"fade-in fade-out\" effect using the CSS transition. But I can\'t get this to work with the background image...

The CSS:

Answer 1

You can transition background-image. Use the CSS below on the img element:

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

This is supported natively by Chrome, Opera and Safari. Firefox hasn't implemented it yet (bugzil.la). Not sure about IE.