Question

所以我有一些图像，我很容易在鼠标上放大。它看起来很棒，但我注意到它附近的其他图像在调整大小时会移动以容纳更多或更少的空间。我希望他们留在原地。这是代码：

img
{
width:130;
height:130;
margin:15px;
background-color:transparent;
background-size:100%;

-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
} 

img:hover
{
width:150;
height:150;
margin-left: 0px;
margin-right:0px;
margin-top:0px;
}

Answer 1

每个图像都应放置在任何内联块容器中，该容器具有静态宽度和高度，以便图像向上和向下滚动。这个容器的CSS：

.image_container {
    width: 130px;
    height: 145px;/* reserved space for image to scroll up */
    display: inline-block;
}

Answer 2

通常很难将子元素扩展到其父元素的范围之外，而不会干扰父元素的任何兄弟元素。

我鞭打了这只是因为我想。它使用box-shadow使其感觉像是与其他图像重叠的图像，并且CSS3非常简单。

它是在WTFPL下发布的。

http://jsfiddle.net/dWBwW/23/

调整一个图像大小时移动的图像（CSS和HTML）

2 个答案: