10

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.

4

4 Answers 4

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

7
  • Hi, that looks nice but i cant place content within the div?
    – Cain Nuke
    Nov 7, 2013 at 8: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 7, 2013 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 8, 2013 at 15:56
  • After 10 minutes trying, get it to work with IE10. Hopefully, it will work also on 9 ..
    – vals
    Nov 8, 2013 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 8, 2013 at 17:18
0

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>

-1

It does work

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

But apparently Firefox hasn't implemented it yet.

6
  • 1
    Thanks, but thats what my question is about. Since ti doesnt work on firefox im looking for alternatives.
    – Cain Nuke
    Nov 6, 2013 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. Nov 6, 2013 at 12:55
  • Yes, but if you do that and apply opacity transition then the content will disappear too.
    – Cain Nuke
    Nov 6, 2013 at 14:09
  • No you only apply the transition to the div containing the background picture, and nothing else Nov 6, 2013 at 14:52
  • How do you do that? When i hove everything inside the div disappears, not only the background.
    – Cain Nuke
    Nov 7, 2013 at 8:40
-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.

3
  • 1
    No, it doesnt. Firefox doesnt support transition for background-image. Thats why im asking for an alternative.
    – Cain Nuke
    Nov 6, 2013 at 12:37
  • From what i can find, it doesn't seem there is a workaround for this yet. Nov 6, 2013 at 12:52
  • 3
    It's the end of 2021 and FF still doesn't support it! 😱 Oct 15, 2021 at 3:55

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.