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. 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. Permalink to comment#

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

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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".