Taking Control of Image Rollovers

On most web browsers, there is a default border that surrounds images that are used as links. It is usually a big, nasty, thick bright blue border. This is likely undesirable, so in this article we will be looking at ways you can take care of it in your CSS …

To remove the default border use this in your CSS :


a img { border: none; }


You can also remove the default border on linked images by including “border=0″ inside the image tag, but this is a deprecated property and is not recommended. Unfortunately it is included in many copy-and-paste code samples since it forces the desired result without having to count on the site owner keeping good CSS.

That default blue border isn’t evil, it’s just trying to be helpful and let you know the image it’s surrounding is a hyperlink. Let’s take that responsibility onto ourselves and see if we can come up with some rollovers for images are a bit nicer and more interesting.

The best way to see these examples is to view the example page and the best way to understand how they work is to download the example and look at the code yourself.

Example 1: Thick Border

This example gives the image a few pixels of padding and a border in it’s normal state and adds a background color on rollover.

Example 2: Dashed Thick Border

This is a similar technique only the rollover adds a thick dashed border to the image. The trick here is that the border is there in it’s normal state as well, only it’s white just like the background color. If that border wasn’t there in it’s normal state and was added during rollover, the image would shift position to make room for the border, which would be a jarring and undesirable result.

Example 3: Black & White to Color

This technique causes the image to “colorize” on rollover. This is a bit more complicated in that you won’t be able to use regular img tags in the html. You will use anchor elements with unique class names. These anchors will have specific heights and widths and a background image. Then on rollover, you can swap the background image for a color version.

Example 4: Add Gradient Background

Instead of adding a solid color like in example 1, you could use an image. Just give the image some padding on either side so there is some room for the graphic to show up.

Example 5: Display Information

This technique makes text appear underneath the image on rollover. It makes use of the background-image property in CSS like in example 3, but in this case, the background image stays the same. The difference is that in regular state, the text is kicked off the screen with a huge negative offset which is removed on rollover. To get the text to show up underneath the image instead of on top of it give the anchor a top padding of a little larger than the height of the image.