CSS Image Rollovers 1

by Joe Gillespie — Nov 1, 2002

Where CSS-only buttons and navbars are great for keeping files sizes to a minimum, sometime we just need to use GIFs, (to be able to use different fonts, for instance).

The boxes containing the GIFs have colored backgrounds in their normal state, but the :hover state changes the backgrounds to white. Naturally, the boxes' background colors are visible through the transparent parts of the GIF so the whole button seems to change color.

This trick will only work with fonts that are not anti-aliased because the fringe colours need to blend between background and foreground.

Again, to keep things simple, I'll only show the style definitions for the first button.

.b1 a,.b1 a:visited
{
background-color:#cc0099;
margin-top:0px;
margin-bottom:6px;
position:relative;
z-index:1;
width:160px;>
height:16px;
visibility:visible;
display:block
}

.b1 a:hover
{
background-color: white
}

Well that's the easy bit. The rest of the layout is a fairly hairy bit of relative positioning. If you think that steel workers balancing on girders is scary stuff, stacking boxes like this so that they work in both Explorer and Netscape comes a pretty close second! View the source.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float