Ryan Seddon
css, xhtml

Advanced hover states using CSS

The hover pseudo-element in CSS can be a powerful tool in a front-end developers arsenal, it’s not only for changing a links colour. In good browsers the hover element can be applied to almost anything but unfortunately ie6 & 7 only support the hover selector on the anchor tag, but of course that isn’t going to stop us accomplishing something cool. I’ll be looking at using the hover pseudo-element to add some clever functionality when a user hovers over an image.

In the above example we can see all the examples of the hovers using nothing but the hover pseudo-element on the surrounding anchor tag. This example uses a few gracefully degrading elements so if the browser doesn’t support the property it will still render fine and function as expected.

Cross browser support

This example has been tested in and works in the following browsers

  • IE6+
  • Firefox 1.0+
  • Opera 9.25+
  • Safari 3+
  • Chrome 1+

Roll over{.feature01}

We’ll deconstruct the above example and see how it all comes together.

The xhtml

The above code is pretty basic a simple anchor tag with a class the image that displays and the overlay and caption we want to show when the user hovers over the image.

The CSS

The break down

Now the CSS is a bit more involved but is relatively straight forward with a bit of explanation.

The anchor tag is converted to a block level element and has its position set to relative so we can move around the span tags inside.

The border-color change applied to the hover pseudo-element is there so IE6 will actually activate the hover this is due to a weird bug in IE6 that will not activate internal items that are changed when hovered over, unless something is applied directly to the hover pseudo-element, in our case a border. This can also be fixed by using background-color: transparent which is the least destructive property if you don’t actually want to modify the anchor itself on hover.

The .overlay01 span is styled on hover as we only need it when the user hovers over the image. Its converted to a block level element, positioned absolutely and given a width and height of 6px less than the image width/height. This is because of the 3px border that sits over the top of the image. If you decrease or increase the border you will need to adjust the width/height accordingly.

The .caption01 span is also position absolutely to the bottom of the anchor tag so the caption will display in a useful position when it’s hovered over. line-height is set to the same value as the height so the text will sit vertically centered. We also set a negative text-indent to hide the text when the hover is inactive; on hover we set the text-indent to a positive number and set the background-color twice using rgb and rgba. This will give it a nice transparent effect, and a solid rgb color for non-supporting browsers, gracefully degrading the transparency.

Finally the image is given a display block so we don’t get a gap between the anchor tag and image.

A little fun

So you may have noticed that the 3 middle images in the example above have an extra word appear when you hover. If you took a look at the example page html you may have noticed that the caption text is using the after psuedo-element along with the content property to dynamically add content through CSS. This is another gracefully degrading technique that will fall back to the generic text if it’s not supporting.