Background image transition on hover

Question

I have html page and I set background image in css rule:

body{ background-image:url("/someurl");}

And i have button, when i hover it I'm change background image. But i do it using JQuery like this

body.css('background-image', 'url(' + initialimageSrc + ')');

I 'd like to have a transition on backgound-image change, but when I use

transition:background-image 2s linear;

It looks very bad. Can any one help?

Answer 1

well, actually, this way of transitioning a background-image only supports fade-in, fade-out, and doesn't really offer any customisability. my advice is to create a second object, which will fade in and out alternatively.

try to follow the conventions in http://css3.bradshawenterprises.com/cfimg/ - it helped me a lot with that subject.