Transition for background image in firefox?

Question

I am trying to find an alternative for this:

"transition:background-image 1s whatever"

in firefox since it only works in webkit browsers.

I have already tried the opacity alternative, but this is not an option for me, as I have content on the background container that will disappear along with the background when using opacity.

Thanks.

Answer 1

You can do this using 2 pseudo elements

CSS

 .test { width: 400px; height: 150px; position: relative; border: 1px solid green; } .test:before, .test:after { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 1; } .test:before { background-color: red; z-index: 1; transition: opacity 1s; } .test:after { background-color: green; } .test:hover:before { opacity: 0; } 

violin with real images

(transition to transition)

To be able to see the contents of a div, pseudo-elements must be in a negative z-index:

fiddle with fixed z-index

looks like IE will not run this hang

 .test:hover:before { opacity: 0; } 

but will run this

 .test:hover { } .test:hover:before { opacity: 0; } 

(As SILLY seems)

script for IE10

Answer 2

 #id_of_element { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } 

Is that not so? Just need to change everything to a background image.

Answer 3

he works

You can see it here: http://dabblet.com/gist/1931619

But apparently, Firefox has not yet implemented it.