It’s Called Web Design

CSS hovers, animated, no client side applications required. Too good to be true?

I was looking for a way to do animated hovers, without having to use flash or javascript. Not that there is anything wrong with these, but anytime I can avoid hoping that someone will have the proper apps installed within their browser, I prefer to take that route.

So how do I do it?

Simple CSS and animated gifs.

First, make an animated gif the size of you nav button:

Next, a little CSS:

#nav {
    height: 35px;
    width: 500px;
}

div.button {
    float: left;
    width: 100px;
    height: 35px;
    margin: 0 3px 0 0;
    background: #fff;
    border: 1px solid #000;
}

div.button a {
    display: block;
    margin: 0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font: bold 13px Georgia, serif;
    color:#039;
    text-decoration: none;
    background: #fff;
}

div.button span {
    display: block;
    margin:0;
    padding: 9px 0 0 0;
    text-align: center;

}

div.button a:hover {
    background: url( 'http://itscalledwebdesign.com/files/gif_hover/bg03.gif' ) top center no-repeat;
    color: yellow;
}

Next, the following div is placed:

<div id="nav">
    <div class="button"><a href="#"><span>Nav 1</span></a></div>
    <div class="button"><a href="#"><span>Nav 2</span></a></div>
    <div class="button"><a href="#"><span>Nav 3</span></a></div>
</div>

You are pretty much just making a div and placing the animated gif as the image for the hover.  In this example, the “a” simply has a white background.

CLICK HERE to see how it looks, it’s the “Fast” example.

View the CSS and source of that example page to see that the other examples are set up using the same code.  You just need to use different animated GIFs as the hover image.

One thing you need to think about is the possibility that animations are turned off on the users computer.  The only problem this might cause will be if you have your hovered text turn into the same color as the original background.  That would then cause the text to disappear.

I would suggest trying it with the animation turned on and off just to see what it would look like.

So there you have it.  Simple, quick CSS animated hovers.

Tags: CSS, Flash, hovers, java, javascript

This entry was posted on Monday, October 27th, 2008 at 4:35 pm and is filed under CSS, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.