Recently, we have noticed a number of prominent web sites that suffer from an all-too-common problem: jumping or displaced mouse-over effects. For an example of what we’re talking about, run your mouse over this image:

What’s happening here is that a border (in this case a solid, 3 pixel border) has been applied to this image on mouseover, but has not been applied (and also not accounted for) before the mouseover.

Simply put, the problem is that when a visitor runs their mouse over the image, it not only adds the border, it also shifts the content around it in a jerking motion.

Note: The code above has been modified to be Internet Explorer 6 compliant. IE 6 has trouble properly assigning a border around a linked image tag without a sort of “call to action,” something that compels the browser to change the border option. Luckily for us, the first option we’ve outlined below not only fixes the image “jumping” issue, it also forces Internet Explorer 6 to do what it should. Our second option (below) accomplishes this with the addition of one short line of code.

Fix #1: Create an “invisible” image border

There are a couple of easy ways to fix this, depending on how your site is designed. If you have a site with a solid content background color (like ours), you can simply add a border with the same color code as your content background to the standard image link, like this:

The code we used to fix the problem is here:.catfixed a img{border:3px solid #fffaef /*this is the background color of our site*/;}
.catfixed a:hover img{border:3px solid #5f9215 /*our desired mouseover color*/;}Obviously, you can remove our notations before using it on your web site.

Fix #2: Creative use of margins

The first fix works fine if your site has a consistent background color, but what happens if your site has a background fade, or you want to apply the same style to items in different locations (with different colored backgrounds)? Instead of making multiple classes to accommodate each area, or resigning yourself to having a “jump” each time a visitor mouses over the affected item, we can simply replace our standard border with a margin instead, like this:.catmargin a img{margin:3px;border:0;}
.catmargin a:hover img{border:3px solid #5f9215; margin:0;}
.catmargin a:hover{margin:0; /*fixes IE 6*/}Don’t forget to zero out your margin on the image hover, or you will end up with the same jump that’s shown at the top of this article. Take a look at how this turns out, this time applied within a box that holds a background gradient.

Notice how the area around the image is still transparent, but there is no jump when the visitor mouses over the image.

Compare this to the first method under the same circumstances and you will see what we’re talking about here. To make the effect more obvious, we changed the initial, “invisible” border to a dark red:

Taking it further.

Now, there are ways to get a little more creative here, such as what CSS Design Yorkshire has done with the image links on their home page. In this case, the image jumps 1 pixel to the right and bottom, while keeping the content to the left and right intact. That last part is key, because it keeps what should be in focus emphasized, not the content that falls outside of the hover area. The text immediately below the image link jumps by 1 pixel as well, which serves as a light accent and an effective way to draw attention. The white-to-orange color choice also works well in this situation. Note that on this particular web site, the effect is not apparent in IE 6.

The point is, were this site to simply assign a border to the image on hover, the content all around the image would jump, making the site look unprofessional. But they took the time to do it right, and having a controlled, slight “bounce” as in this example adds emphasis to the item.

If you are interested in creating a mouseover image that has an inline border (one that does not increase the overall width or height of the image area), take a look at our sister article entitled creating an inline css image border.

Compatibility:
Both methods have been tested in and are compatible with Internet Explorer 5.5 and 6 (see above), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

Tags: border, css, mouseover

This entry was posted on Friday, January 25th, 2008 at 11:36 am and is filed under design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.