Question

I have a sprite image for each list item (home, services and contact). I’m using CSS to move the position on hover. It works fine except I would like fade the transition instead of rapidly moving the position. I am trying to make it look like the button is being pushed in on hover. I would like to slow it down. I have been all day on this and not getting anywhere. Thanks for any help!

HTML

<ul id="navigation">
<li class="link1"><a href="index.html">Home</a></li>
<li class="link2"><a href="services.html">Services</a></li>
<li class="link3"><a href="contact.html">Contact</a></li>
</ul>

CSS

li.link1 {
text-indent: -9999px;
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left top;
}
li.link1:hover {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left bottom;   
}
li.link2 {

Repeats itself...

Answer 1

Could you do it with relative positioning and CSS3 transitions?

li.link1 {
    position: relative;
    text-indent: -9999px;
    background-image: url(http://www.rjdesigns.net/temp/images/home.png);
    background-repeat: no-repeat;
    height: 15px;
    width: 66px;

     transition: margin 0.25s;
     -moz-transition: margin 0.25s; /* Firefox 4 */
     -webkit-transition: margin 0.25s; /* Safari and Chrome */
     -o-transition: margin 0.25s; /* Opera */
}

li.link1:hover {
    background-position: left bottom;

    // These lines add height to the top of the li, so it doesn't 
    // glitch/vibrate if you hover on the top pixel or two
    border-top: 2px solid transparent;
    top: -2px;

    // Increase margin by 2px on top and left
    // Decrease by 2px on right so you don't shift other menu items
    margin: 2px -2px 0 22px !important;
}

Demo:
http://jsfiddle.net/jtbowden/gP9kD/

Update Demo with all three links and simplified CSS for the li elements:
http://jsfiddle.net/jtbowden/gP9kD/1/

jQuery

If you want a true fade effect, you can do this with jQuery. I hacked together an example here:

http://jsfiddle.net/jtbowden/gP9kD/4/

This example creates clones of each li changes the background-positioning, and absolutely positions them under the current li elements and hides them. Then on hover, it fades the main li out (to almost zero, so it still stays active), and fades in the one underneath.

It is a little hacky, because the li clones still contain the link, etc. But it works, and demonstrates the principle.