I want to share a CSS technique I’ve used alot. I’m sure that you have seen CSS sprite techniques that utilize changing background position on hover to change a link’s state. Also, they have the added benefit of keeping from loading images on hover, limiting lag. This technique is very similar, but works like a charm for IE6 and PNG images. I know this may be a moo point at this stage, because IE6 is on the outs, but still works beautifully as a technique.

Let’s jump right in, as I don’t have a lot of my Labor day to give.

First, as always, I want to preview this thing and see what it does. Here’s your preview:

Aight, the meat and potatoes: the XHTML

So, the markup is pretty simple. It’s basically a link with a span in it. Check it:

<a href="..." id="buyme_coffee">
<span>Buy me a coffee</span>
</a>

How it works

Before looking at the CSS, it helps to know how it works. Think of it as a window to a larger canvas behind it. It’s easy to think of it in terms of the two elements:

• The window: The A tag
• The canvas: The SPAN tag

The window only shows a portion (a view) of the canvas. The canvas can be any size. By changing the position of the canvas, you can pan a different portion of it into the window. The window is fixed width, fixed height, and any overflowing content is hidden. This way, only the portion of the canvas in the window view is visible.

The CSS

#buyme_coffee,
#buyme_coffee span{
display:block;
width:160px;
height:40px;
position:relative;
overflow: hidden;
}
#buyme_coffee span{
height:120px;
background: url(coffee_button.png) 0 0 no-repeat;
text-indent:-9000px;
}
#buyme_coffee:hover span{
top:-40px;
}
#buyme_coffee:active span,
#buyme_coffee:focus span{
top:-80px;
}

The first selector targets two tags, the #buyme_coffee link and the #buyme_coffee span span inside the link. I’m doubling up the rules by targeting both tags because both tags share quite a few similar tags. As for the rules that are different, I’ll correct in the next selector.

This first selector sets both A tag and SPAN tags to block (since they are inline by default), sets the width and height, and then sets the overflow to hidden. The overflow:hidden here is the key. This causes the A tag to act as a window that only views the content in its height x width box. All other content is simply cutoff or put away from view.

The second selector, #buyme_coffee span, resets the height to the height of the background image, which is larger than the viewport (A tag), but gets cutoff from view. The text-indent:-9000px is a cheap way of shoving the text off the screen so that this text is replaced by the background image. The background image contains the three states we want: Default, Hover and Focus/Active. Here’s a preview of that background image:

You probably guessed it. The top image will show as default.

K, we’re almost done. The third and fourth selectors target the :hover and the :active and :focus states respectively. This is uber simple. When the link (or window) is hovered, push the top of the span (or canvas) up by 40px, showing the hover state. When the link is active or focused, push the span up by 80px, revealing the active state.

That’s it! So why is this better than just panning the background position you ask? Good question. I started using this method when I needed to make the background an alpha-transparent PNG, which as you know, doesn’t display correctly unless you use an IE alpha image loader filter, which as you know doesn’t play nicely with background image positions. With this method, you can apply an alpha image loader filter to the span element and it works like a charm.

Hope you enjoy. Cheers!

Update: Based on @Justin’s suggestion, I’ve included some modified CSS below to show this technique sans the a text-indent:-9000px for screen reader friendliness. A demo of the modified CSS can be seen here.

#buyme_coffee,
#buyme_coffee span{
display:block;
width:160px;
height:40px;
position:relative;
overflow: hidden;
}
#buyme_coffee span{
height:140px;
background: url(coffee_button.png) 0 0 no-repeat;
line-height: 20px;
white-space: nowrap;
top:-20px;
}
#buyme_coffee:hover span{
top:-60px;
}
#buyme_coffee:active span,
#buyme_coffee:focus span{
top:-100px;
}