• Skip To Content
• News
• Site Map

CSS Gif Hover Animation

Sunday, January 8, 2006 by Nicholas Gagne

The CSS Gif Hover Animation method is very simple. First set up your anchor tags, with their respective images assigned to them using the anchor tag's background property in the stylesheet. View a simple example layout I have set up using an image of a tab.

Here is the basic HTML layout that I will be using:

<ul id="navTab">
    <li><a>Text.</a></li>
    <li><a>More text.</a></li>
</ul>

Here is the CSS code to assign the background image and give it the correct dimensions:

#navTab a {
    display: block;
    width: 135px;
    height: 44px;
    border-top: 1px solid #666;
    background: url(/images/article5/tab.gif)
}

Next, instead of using a static image for the rollover state on the anchor tag's :hover state, you will add an animated Gif image.

#navTab a:hover{
    background:url(/images/article5/tabOver.gif)
}

View the final result, one set uses moving tabs and the other set uses changing background colors. If used correctly (and tastefully) there are many great design possibilities with this technique.

• Digg this article
• Add to Del.icio.us
• Read more articles
• Subscribe to RSS Articles Feed