“Jumpy” Hover Borders on Image Links: Solved At Last

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

2 thoughts on ““Jumpy” Hover Borders on Image Links: Solved At Last”

  1. Heya this is somewhat of off topic but I was wondering if blogs use WYSIWYG editors or if you have to
    manually code with HTML. I’m starting a blog soon but have no
    coding expertise so I wanted to get advice from
    someone with experience. Any help would be enormously appreciated!

  2. There are several blogging software options for self-hosted blogs that use WYSIWYG editors–WordPress is one (available at wordpress.org), and it’s what I use on this site. It’s helpful if you know how to code a bit of HTML to format your articles better, but the basic software takes care of most of the blogging work for you, and you can even use one of the premade layouts that come with the installation. If you already have your own domain name and place to host your files online, WordPress.org software is a good way to go.

    Additionally, WordPress.com, Blogger.com and other blog hosting sites provide a good, clean WYSIWYG editing interface and also remove the hassle of setting up your own domain and hosting service. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.