Как CSS Img Border на Hover без сдвига изображения

Question

Я пытаюсь сделать границу вокруг изображения, появляясь с наведением мыши. Следующее выполняет то, что я ищу, но оно меняет изображение при появлении границы. Как это можно сделать при перемещении изображения?

Вот jsfiddle http://jsfiddle.net/8gA6z/

.screenshots { 
    float: left; 
    width: 155px; 
} 
.screenshots img:hover{ 
    border: 5px solid #06C; 
} 

Answer 1

Дайте прозрачную границу и изменить границы-цвет при наведении курсора мыши

.screenshots img { 
    border:5px solid transparent; 
} 
.screenshots img:hover { 
    border-color:#06C; 
} 

Updated fiddle here.

Answer 2

Вы могли бы дать ему рамку, прозрачной и такой же ширины, когда не колебались:

.screenshots img { 
    border: 5px solid transparent; 
} 

jsFiddle example