Styling image links

For the most part, styling image links requires no extra considerations than any normal linked element. Older browsers, such as IE versions 8 and below, would often place a default border around linked images. As a result, most CSS resets contain a selector that set the initial border property of images to none.

blue vaseHowever, there will be times you want to visually indicate image links. Usually image links are used to supplement existing links, but in cases like image thumbnails or where the image stands as the only available link you should style the image in a way that allows the user to infer the image is a link.

If you use background images, you have multiple styling options, including the ability to swap images out during a hover. If you must use an inline image, your stylistic choices are a little more limited. You can modify properties such as borders, padding, background colors, or even width and height to alert users to the image’s purpose. Those properties can be further refined with the use of the :hover pseudo-class selector. If you do choose to modify those properties, taking stylistic cues from existing link styling makes it easier to convey the purpose of the image. Keep in mind that unless overridden images are inline, and certain CSS properties can affect layout. Be sure to test image styling thoroughly to make sure it doesn’t negatively impact surrounding elements.

Thumbnail test

tan bowl blue vase tan vase red pitcher red bowl