Problem

flower1 flower2 flower3 flower4 flower5 flower6

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)

flower1 flower2 flower3 flower4 flower5 flower6

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

flower1 flower2 flower3 flower4 flower5 flower6

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

flower1 flower2 flower3 flower4 flower5 flower6

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.