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

The solution (that I found by myself) is a ninja trick, I can offer you two ways:

first you need to make a "container" for the , it will contain normal and hover states at the same time:

• with CSS3 selectors http://jsfiddle.net/eD2zL/1/ (if you use this one, "normal" state will be first child your container, or change the nth-child() order)

• CSS2 solution http://jsfiddle.net/eD2zL/2/ (differences between are just a few selectors)

Basically, you need to hide "normal" state and show their "hover" when you hover it

and that's it, I hope somebody find it useful.