如何將CSS圖像邊框懸停而不移位圖像

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