Over at CSS-Tricks.com, I spied an article that spoke directly to one of my infamous webdesign flaws over the years–making all my image links have a:hover borders.

Why would I call this a “flaw?” Well, unfortunately, when you give anything on a webpage a border under some circumstances and not others, it can create a “jumpy” layout look–for instance, when you hover over image links on my blog, they get a border underneath them, which makes other page content shift a little downwards on the page until you mouse off the image.

This is the “image rollover border” effect, and it can make your page look REALLY amateurish…as I well know. 🙁 It’s been bugging me for years on this blog and all my other sites–I love how the hover border looks on text links, but I hate the way it makes other things on the page “jump” a little!

Making Non-Jumpy Rollover Borders for Images

The CSS-Tricks article does a wonderful job of explaining exactly why all this happens, as well as offering some solutions for how to incorporate a “bordered” hover look for your images without getting layout shifts. Several methods, including negative-margin borders, are suggested and diagrammed for you.

Getting Rid of Image Hover Borders Altogether: Mission Impossible?

But what if you don’t want borders around your images at all? Preferably, I would like my text links to have the border-bottom property on hover, while my image links would be without that dumb-looking border.

So I started looking into how to get rid of the hover border on just my images, thinking it would be pretty easy. All I’d have to do is use a little bit of CSS like so…

img {border: none;}

…and I’d be good, right?

WRONG. Wrong wrong wrong. That didn’t work, and nor did the other iterations I tried, such as:

a:hover img {border: none;}
img a:hover {border: 0px;}

I tried everything I had in my mental CSS toolkit to solve this. No luck. Then I decided to Google it, wondering if I was the only webdesigner who was having this issue. “After all, it’s probably a really simple fix,” I thought.

Turns out, I’m not the only webdesigner who has had difficulty with it, and it is most definitely NOT an easy fix. The only real “fix” for this problem comes in two similar flavors:

Fix #1	Fix #2
Give all your image links a specific CSS class, and reference it every time you have an image link in your document.	Get rid of the CSS that creates a hover border entirely.

Fix #1’s CSS

Make a specific CSS class for all the links that will be wrapped around images…

.imglinks a {border: none;}

…and implement it every time you have an image link (place the code in the link tag rather than the image tag):

<a href=”your link here” class=”imglinks”><img src=”your image filename here”></a>

The Problem with Fix #1

If you have a large site, or you run any sort of blog software to make your site, Fix #1 is just not going to be worth your time. You would have to physically go back and edit EACH image link throughout your ENTIRE site to completely implement this fix. I have almost 800 blog articles on this site already, and I can’t imagine going back and editing each of those image links in all those articles to make them not have a hover border anymore.

But if you have a small site or don’t run any blogging software, Fix #1 will work beautifully for you, provided you have the patience to change all your image links.

Fix #2’s CSS

Anywhere you see CSS code like this that would hit any images on your page…

a:hover {border: 1px solid #000000;}

…change it to:

a:hover {border: 0px;}

This will fix all your image links, but it will also take away any borders from your text links as well. It’s a quite ham-handed fix, but it gets rid of “jumpiness” on your page. (Note: Make sure you make your hovered links look different enough from regular text without the borders–different color, etc.)

This is a better option, albeit a less graceful one, for larger sites or sites that run blogging software. For certain, it saves you some gray hairs and gnashing of teeth. XD

For Further Reading

The following forum threads discuss this problem in greater detail, and helped point me toward the fixes I have detailed above:

Remove a:hover for images? @ StackOverflow.com
Getting Rid of a:hover on Images @ Sitepoint.com
CSSBeauty Discussion on A:Hover Borders