On your blog’s design or WordPress Theme, do you have borders around images inside links?
Some designers put borders around linked images as an indicator to the reader that this is a link, and yet many readers understand pretty quickly when an image is a link and when an image is just an image. So why bother?
Whether or not an image is styled differently when it’s a link is up to the designer and to you. You can set it however you wish that works best with your blog’s design and identity.
The image is set with the HMTL tag img and can be styled with and without borders, inside and outside of links. For this tutorials, let’s limit ourselves to link borders around images.
Link tags, known as anchors have three basic states:
- Active: Just waiting to be clicked.
- Hover: The mouse moves over in anticipation of the click.
- Visited: Been clicked.
In CSS, the styles for these states would be:
a, a:active {...}
a:hover {...}
a:visited {...}
If these were text links, they might be set to have a different font color in each state:
a, a:active { color: blue }
a:hover { color: red }
a:visited { color: green }
The text link would change depending upon the user interaction, changing to red if the mouse hovers and green to indicated a visited link.
A linked image can have similar indicators in a border around it:
a img { border: 1px red solid; }
a:hover img {border: 1px blue solid; }
a:visited img {border: 1px green solid; }
When the image sits on the page, the border around it would be red. When hovered over, it would turn blue, and after visiting, the border would be green.
A border around a linked image, however, can look really ugly, forcing a colored box around an image that might not need a box. If you still want an indication that the image is a link, you can set the active and visited link state to “no border” and only show the border when the mouse hovers over the image.
a img { border: 0; }
a:hover img {border: 1px red solid; }
a:visited img {border: 0; }
The red border color might jump out too much, so you can change it to black or gray or whatever color would stand out while complementing your blog’s design.
These styles set the border state for all images on your blog. If you would like the linked images only within the post content area to have a border around them, and/or the linked images within your sidebar to have a different border, or no border, you need to set the image styles for each container, such as:
.content a img { border: 1px blue solid; }
.content a:hover img {border: 1px red solid; }
.content a:visited img {border: 1px green solid; }
#sidebar a img { border: 0; }
#sidebar a:hover img {border: 1px navy solid; }
#sidebar a:visited img {border: 0; }
There are many ways to customize the look of images to indicate links, including adding a background color when the image is hovered over such as:
.content a:hover img { border: 0; background: red; }
To turn off all borders around linked images, which is the preferred method as borders around linked images tend to add clutter, simply set the border to zero around the images and linked images:
a img { border:0 }
img { border:0 }
Lorelle VanFossen blogs about blogging and WordPress on Lorelle on WordPress.
