Image transitions not working in firefox

Question

http://jsfiddle.net/Lnykg/

When you hover over the image its supposed to fade transition into the other image, but in firefox the transition is broken. I tried adding a top: 0px; which was suggested from a similar question asked, but still doesn't work.

.infidus {
    margin-left: 0px;
    top: 0px;
    width:698px;
    height:300px;
    background: url();
    -moz-transition-duration: 0.7s;
    -webkit-transition-duration: 0.7s;
    transition-duration: 0.7s;
}

.infidus:hover {
    margin-top: 0px;
    top: 0px;
    width:698px;
    height:300px;
    background: url();
    -moz-transition-duration: 0.7s;
    -webkit-transition-duration: 0.7s;
    transition-duration: 0.7s;
} 

Answer 1

According to w3c list of animatable properties background-image is not an animatable property. Although some browsers like chrome support this cross-fading behavior.

For firefox, bug 546052 is filed for this kind of transition.

However you can achieve what you want by doing some tricks that are described at the following links:

CSS3 background image transition

CSS3 Fade Effect