Learn Web Design: CSS Rollovers

Learn how to create a simple rollover image using CSS.

In addition to working in web design and development, I also teach a few different web design courses. I usually refer my students to intermediate to advanced resources like A List Apart, or Think Vitamin. To help people get to the point where they’ll find those sites helpful, I’m going to start posting some short articles on more basic, but still helpful, techniques you can use if you’re just getting started.

We’re going to get things started with a frequently requested one — how to create a rollover image with Cascading Style Sheets (CSS).

The Images

Here are the two images we’ll be using for our rollover. It’s important to make sure they’re the same size.

Regular State:

rollover

Rollover State:

rollover

The HTML

We’ll start with the HTML for our page. Whenever you’re using CSS techniques, it’s important to make sure your pages are well coded. If you have mistakes in your HTML you might see some strange behaviour with your rollovers. I suggest either using a program like DreamWeaver to help you create error free HTML, or at least double-check your work using the validation tool at validator.w3.org.

Newer web browsers support more CSS options than older ones like Internet Explorer 6, but since you’ll probably want your website to work on a lot of different browsers we’re going to limit ourselves to using CSS that IE6 understands. This means that rollover effects are only available on link elements — that’s the <a href> tag.

In your HTML, add something like the following code:

<a href="http://www.designmeme.com/articles/" id="rollover"><span>Web Design Articles</span></a>

Notice that we added an extra attribute inside the opening tag. The id="rollover" lets us add styles for this link without affecting the other links on the page.

We’ve also placed <span> tags around the text inside the link. This will also allow us to add styles for the text separately from the link itself.

Next we’ll use CSS to replace the text “Web Design Articles” with a rollover image that changes when you hover your mouse pointer over the link.

The CSS

We’re going to use CSS to add a background image to our link and give it a matching height and width to display the entire image. We’ll then hide the text inside the link by targeting the wrapping <span> tags. Finally, we’ll use the CSS :hover pseudo class to define the alternate image that will display for the rollover.

Before the closing <head> tag of your HTML document add the following

<style type="text/css" media="screen">
<!--
a#rollover { background-image:url(rollover1.gif); height: 50px; width:200px; display:block; }
a#rollover span { display:none; }
a#rollover:hover { background-image:url(rollover2.gif); }
-->
</style>

Some notes on those CSS lines that you might find helpful:

  • a#rollover targets the CSS at the link with id="rollover"
  • height and width should match your rollover images
  • display:block is needed to set a height and width for our image
  • display:none is used to hide just the text between the span tags inside the link — but not the link itself
  • a#rollover:hover only needs to include things that are changing when the image is being rolled over — in this case the background image

Here is our finished rollover image:

Web Design Articles

That’s all you need to get started creating rollover images with CSS.

Have fun, and keep on rollin’ baby. ˆ_ˆ

Suggested Reading

CSS: The Missing Manual