Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Fade One Image to Another Menu

Make a CSS sprite image, with the top half and the bottom half being the two images you want to animate between. The jQuery adds a <span> tag, and adds the bottom half of the sprite image as its background. As you hover on and off, the span animates between fully transparent and fully opaque, fading one image into another.

HTML:

<ul id="menu">
       <li id="home"><a href="#">home</a></li>
       <li id="about"><a href="#">about</a></li>
       <li id="services"><a href="#">services</a></li>
       <li id="contact"><a href="#">contact</a></li>
</ul>

CSS:

ul#menu li a{float:left;display:block;background:url("images/menu.png")  no-repeat;width:150px;text-indent:-9999px;height:50px}
ul#menu li#home a{background-position:0px 0px}
ul#menu li#about a{background-position:-150px 0px}
ul#menu li#services a{background-position:-300px 0px}
ul#menu li#contact a{background-position:-450px 0px}

ul#menu li a span {background:url("images/menu.png");height:50px;display:block}
ul#menu li#home a span{background-position:0px -50px}
ul#menu li#about a span{background-position:-150px -50px}
ul#menu li#services a span{background-position:-300px -50px}
ul#menu li#contact a span{background-position:-450px -50px}

jQuery:

$(function() {
       $("ul#menu li a").wrapInner("<span></span>");
       $("ul#menu li a span").css({"opacity" : 0});

       $("ul#menu li a").hover(function(){
               $(this).children("span").animate({"opacity" : 1}, 400);
       }, function(){
               $(this).children("span").animate({"opacity" : 0}, 400);
       });
});

Reference URL

Comments

  1. Charlie
    Permalink to comment#

    You can see a demonstration here:

  2. Al
    Permalink to comment#

    demo has the stepdown problem in ie7,
    works ok with FF

    Al

  3. Al
    Permalink to comment#

    sure don’t work with ie6,
    tested it out with a jpg tho and that works

    unitpngfix does not work with background-position in ie6

    I think that it is an interesting effect when you hover on a link

    al

  4. Al
    Permalink to comment#

    is the link to the reference url broken?

    Al

  5. Charlie
    Permalink to comment#

    reference url should work now, and stopped the stepdown in ie7 – thanks for the heads up people

    • Jeff
      Permalink to comment#

      Also, how do you mark an active state? I would like to keep the item highlighted once selected.

    • Alexandru Nastase
      Permalink to comment#

      aplly a class name to that anchor tag

    • Alexandru Nastase
      Permalink to comment#

      still look’s creepy in ie7 on w7

  6. Jeff
    Permalink to comment#

    Can you do this in a vertical menu?

  7. Dani
    Permalink to comment#

    Really great effect. I have a third state which is active, It works well with css only but when I hover the active state with this effect it appears the hover state, can I prevent from applying this effect to the active current selected tab while allowing the normal tabs to fade to hover. Any help would be appreciated. Thanks.

  8. Pini
    Permalink to comment#

    i don’t know what i.m doing wrong but i copy paste to my page and it gets an angle,
    you can see it here :(

    http://www.strongerorg.com/OrganisationSite/SpriteTest.aspx

  9. sridarshan
    Permalink to comment#

    I think you should use the .stop().animate() here , if you dont want the images to flicker after multiple hovers

  10. Ruana
    Permalink to comment#

    Hi,

    in IE7 you should define a

    ul#menu li {display: inline; }

    otherwise the browser shows a “step”-effect (stepping down from left to right). I did notice several times that IE7 has problems with display: block; added to the a-selector in horizontal lists. Sometimes I even had to remove it totally otherwise the browser wouldn’t display the list properly.

  11. claus
    Permalink to comment#

    hi,

    it works very good, thanks
    but how can I center it in my web page?

    I tried with a DIV propertie but it didn´t work…

  12. sean

    This is all very nice & I can see it works – but you don’t explain where to place the jquery code or how to link it to the specific task – much more instruction is needed here.

  13. Groebe
    Permalink to comment#

    The Preview Page gives me a spyware alert from my anti-virus program

  14. Matt
    Permalink to comment#

    Hi,

    I am having trouble getting the navigation buttons to stay active on the button being clicked. Alexandru Nastase (above) mentioned adding a className to the anchor but you didn’t elaborate and I can’t figure it out. so I’m going to ask the question. How do you get the button being clicked to remain in the hover state while resetting the other buttons to the normal link state?

  15. Otto

    I got everything in place but can not get this to work at all.
    Is this script compatible with jquery-1.3.2.min.js only?
    The site I’m setting up is on 1.7.1

  16. Andrew K
    Permalink to comment#

    In case anyone runs into this issue if you copy the code from the reference URL (http://charles-harvey.co.uk/plugins/animatedbackground/) the second line of jQuery that inserts the span has a space in the first span markup tag – which causes the function to not work properly ;)

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```