CSS a:hover image borders

Question

I have a bunch of linked images in a table, with some padding. When I try to add an img:hover or a:hover border attribute, when the border appears, everything moves over by the amount of pixels that the border is thick. Is there a way to stop this behavior?

Answer 1

img {
    border: solid 10px transparent;
}
img:hover {
    border-color: green;
}

Answer 2

img:hover {
  border: solid 2px red;
  margin: -2px;
}

Seems to work for me (Safari 6.0.5). No added space since the border is drawn on the 'inside' of the img.

Answer 3

The problem is that you're adding a border to the element that takes up space - the other elements on the page have to move to make room for it.

The solution is to add a border that matches the background, and then just change the color or styling on hover. Another possibility is to make the box larger than you originally intended, and then resize it to fit the border you're adding.