缩放图像会影响目标图像周围的其他元素

Question

基本上我要做的就是连续拍摄一组图像，每当我将鼠标悬停在其中一个图像上时，该图像应该被放大并获得一个红色边框。

我正在使用CSS转换。

我现在的问题是，当我将鼠标悬停在图像上方时，所有周围的图像都会向下推，并且稍微偏向一边。

我注意到的一件事是，如果我删除边框过渡效果，效果就会完美。

html部分非常简单：

<div id="Menu">
    <img src="img1" alt="" /> <img src="img2" alt="" /> <img src="img3" alt="" /> <img src="img4" alt="" /> <img src="img5" alt="" /> <img src="img6" alt="" /> <img src="img7" alt="" />
</div>

至于CSS：

#Menu {
    text-align:center;
    margin-top:20px;
}
#Menu img {
    position:relative;
    display:inline;
    border:none;
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    z-index:1;
    transition:transform .5s, border .5s;
    -webkit-transition:-webkit-transform .5s, border .5s;
    -moz-transition:-moz-transform .5s, border .5s;
}
#Menu img:hover {
    position:relative;
    display:inline;
    border: 3px #C00 solid;
    border-radius: 2px;
    transform:scale(1);
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1);
    z-index:10;
    transition:transform .5s, border .5s;
    -webkit-transition:-webkit-transform .5s, border .5s;
    -moz-transition:-moz-transform .5s, border .5s;
}

问题是什么？如何解决？

Here's a JsFiddle example.

Answer 1

你应该添加

#Menu img {
   border: 3px solid transparent;
}

说明：

如果你了解CSS盒子模型架构

Border占据了元素周围的空间而不是元素内部，所以当你在悬停时使用边框时，它实际占用元素周围的空间并将其他元素推到一边，因此为了防止这种情况，我们将其欺骗使用带透明色边框的地方。

如果需要，还可以使用新的CSS3属性，称为box-sizing: border-box

完成跨浏览器

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 

这是做什么的？

边框，填充等将在框内计算，而不是在外部计算，因此如果您不需要transparent边框，也可以使用这些属性

Answer 2

简单的边框透明

#Menu img {
border: 3px solid transparent;
}

http://jsfiddle.net/N9Zdq/2/

Answer 3

fiddle

这里看看fiddl e 你缩小到1，他已经是。我把它改为1.3：）