Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [noob] Ease Transition not working in Firefox and IE

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #178651
    SNGreven
    Participant

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

    #178654
    Paulie_D
    Member

    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.

    #178673
    SNGreven
    Participant

    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).

    #178690
    Paulie_D
    Member

    There are other options but they involve pseudo elements.

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

    #178691
    SNGreven
    Participant

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.