Problem

Notice how the images are jumping when you hover over an image. This is because the size of the image box changes by adding the 3 pixels all around it.

First Solution (works in certain cases and has good browser compatibility)

By adding a white border around the image on it's regular state (it must be the same number of pixels as the hover border), you avoid the jumping problem. However, this solution only works if you have a solid color background.

Second Problem

A problem with the first solution (besides only working on solid backgrounds) is if you do want a smaller border on an image in it's regular state, but want it to grow in the hover state. This still causes the headache-inducing jumping aroung.

Second Solution

Using the outline property instead, avoids the jumping, because it does not add to the width of the box, like image does. Note, I only added 2px to the border, to get a final result of 3px. 1px from original border, and 2 from the outline.