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

所以我有一些图像可以顺利地放大鼠标。它看起来不错，但我注意到附近的其他图像有点移动，以适应调整大小时或多或少的空间。我希望他们留在原地。下面是代码：调整图像大小时移动图像（CSS和HTML）

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; 
}

来源

2012-01-09 Karl Weisshaupt

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

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

来源

2012-01-09 23:51:09

这并没有真正的帮助。我知道'display：block'跳过了行，所以我尝试了'display：inline'。所有的元素仍然移动，以适应调整大小的元素 – 2012-01-10 00:48:46

对不起，我的意思是'display：inline-block;' – 2012-01-10 06:29:29

它仍然无法正常工作。图像正在改变边缘，其他所有图像都在向上移动以再次适应 – 2012-01-11 15:42:00

它通常是一种很难扩展子元素登天的它的父元素，而不会干扰父的兄弟姐妹。

我鞭打这只是因为我想。它使用盒子阴影让它感觉像它与其他图像重叠的图像，用相当简单的CSS3。

它在WTFPL下发布。

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

来源

2012-01-10 01:09:18 joar

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

回答

相关问题