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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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