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 on webkit browsers.

I already tried the opacity alternative but thats not an option for me since i have content on the background container which will disappear along with the background if using opacity.

Thank you.

possible duplicate of [CSS3 Background image Transition](http://stackoverflow.com/questions/9483364/css3-background-image-transition) — Paulie_D, Nov 06 '13 at 09:59
No, its not because the solution offered there is the opacity thing and as i said on my post that wont work for me. — Cain Nuke, Nov 06 '13 at 10:25
Check this answer : http://stackoverflow.com/a/16619705/1873387 It looks like firefox hasn't implemented it yet. — Romain Braun, Nov 06 '13 at 11:50

vals · Accepted Answer · 2015-12-17T21:36:45.913

19

You can do that 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;
}

fiddle with real images

(hover to transition)

To be able to see the div content, the pseudo elements need to be in negative z-index:

fiddle with corrected z-index

looks like IE won't trigger this hover

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

but will trigger this one

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

(As SILLY as it seems)

fiddle for IE10

edited Dec 17 '15 at 21:36

answered Nov 06 '13 at 17:08

vals

61,425
11
89
138

Hi, that looks nice but i cant place content within the div? – Cain Nuke Nov 07 '13 at 08:39
You are right, I forget to check that. I have added another example, where I set the z-index to negative values and corrects that problem. – vals Nov 07 '13 at 17:01
Wow, it works perfectly! Thank you. And now just as bonus. Does it work for the latest version of IE? I have 9 and it doesnt work here. Not that i care much because IE sucks though. – Cain Nuke Nov 08 '13 at 15:56
After 10 minutes trying, get it to work with IE10. Hopefully, it will work also on 9 .. – vals Nov 08 '13 at 16:39
Wow, Explorer really is a piece of shit. I cant believe its necessary to come up with a lot of odd code in order to make things work there. Seems like it wont work on explorer 9. But nevermind, i gave up explorer long time ago anyway. Thank you so much for your help. – Cain Nuke Nov 08 '13 at 17:18
do remember that after and before psuedo-elements will not work on inputs, such as submit buttons, where an effect like this is often desirable – Toni Leigh Oct 16 '14 at 09:09
I put +1 here, BUT NOW I NEED TO IMPLEMENT ALL THESE IN MY PROJECT, anyway, thanks – msangel Dec 31 '15 at 06:40

score 0 · Answer 2 · answered Aug 31 '20 at 15:32

Easiest solution making use of hover

 

.self-pic {
    height: 350px;
    width: 350px;
    position: relative;
    border-radius: 1rem;
}

img {
    position: absolute;
    left: 0;
    transition: opacity, 1s;
}

img.front:hover {
    opacity: 0;
}

<div id="self-pic">
  <img class="back" src="https://source.unsplash.com/random/350*350" />
  <img class="front" src="https://source.unsplash.com/random/351*351" />
</div>

score -1 · Answer 3 · answered Nov 06 '13 at 11:52

-1

It does work

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

But apparently Firefox hasn't implemented it yet.

answered Nov 06 '13 at 11:52

Romain Braun

3,624
4
23
46

1

Thanks, but thats what my question is about. Since ti doesnt work on firefox im looking for alternatives. – Cain Nuke Nov 06 '13 at 12:36
@CainNuke Ok sorry. I guess the only thing you could do would be to have an empty div only containing the background image and another div on top containing the content... I can't think of another alternative. – Romain Braun Nov 06 '13 at 12:55
Yes, but if you do that and apply opacity transition then the content will disappear too. – Cain Nuke Nov 06 '13 at 14:09
No you only apply the transition to the div containing the background picture, and nothing else – Romain Braun Nov 06 '13 at 14:52
How do you do that? When i hove everything inside the div disappears, not only the background. – Cain Nuke Nov 07 '13 at 08:40
Yes, so you should have a containing div, and inside that div one div containing only the background, and on top of it, one div containing the content. This isn't great but that's all I've got. – Romain Braun Nov 07 '13 at 09:33

Adam 'Sacki' Sackfield · Answer 4 · 2013-11-06T12:00:39.623

-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;
}

Does this not do it? Just need to change the all to background-image.

edited Nov 06 '13 at 12:00

answered Nov 06 '13 at 11:40

Adam 'Sacki' Sackfield

594
1
4
19

1

No, it doesnt. Firefox doesnt support transition for background-image. Thats why im asking for an alternative. – Cain Nuke Nov 06 '13 at 12:37
From what i can find, it doesn't seem there is a workaround for this yet. – Adam 'Sacki' Sackfield Nov 06 '13 at 12:52
3

It's the end of 2021 and FF _still_ doesn't support it! – CenterOrbit Oct 15 '21 at 03:55

transition for background-image in firefox?

4 Answers4

fiddle with real images

fiddle with corrected z-index

Easiest solution making use of hover

Linked

Related