[noob] Ease Transition not working in Firefox and IE

[SNGreven]

I’m trying to make a menubar with transitioning images and it works in Chrome but it’s not working in Firefox and IE (not tried any others). Am I missing something? I’m very new at this.

#home {
height: 200px;
width: 200px;
position: absolute;
left: 40px;
background-image: url(../img/home_1.png);
transition: background-image 500ms ease;
-moz-transition: background-image 500ms ease;
-webkit-transition: background-image 500ms ease;
}
#home:hover{
background-image: url(../img/home_2.png);
transition: background-image 500ms ease;
-moz-transition: background-image 500ms ease;
-webkit-transition: background-image 500ms ease;
}

[Paulie_D]

I’m surprised it’s working at all…I didn’t think you could transition background-image at all.

Chrome is obviously ahead of the game but as far as I know FF/Ie do not yet support it.

[SNGreven]

The swapping images are working so it’s not a very big deal. I wanted to use the transition to make it look more friendly but I understand that it won’t work the way I want in most browsers (bummer).

Can I use the transition on de (background) color instead and insert the white image on top? (It’s a square colored block with a white icon in the center).

[Paulie_D]

There are other options but they involve pseudo elements.

If you build a demo in Codepen.io, we can show you.

[SNGreven]

I put in the full HTML and CSS (hope I do this right):
http://codepen.io/anon/pen/ADCah
Images are an example I “borrowed” from another site I have in development but the effect is the same.

I try to avoid Javascript for these effects. CSS seems like a much lighter and simpler solution. I used the standard option in Dreamweaver for rollover images before but it’s outdated and bulky.

[Author]

Posts