图像更改/放大悬停不影响页面间距

Question

我目前使用onmouseover和onmouseout交换图像悬停。这个效果很好，但现在我们想添加this scroller的效果 - 基本上，增加了如果图像A是20x20并且悬停时显示的图像是80x80的功能 - 我怎样才能让悬停图像在“顶部”打开其他人如此增加图像大小不会影响容器或桌子？

有几个要求：该解决方案需要在IE7中工作，并且必须能够在悬停时显示不同的较大图像。

Answer 1

您可以使用CSS3对其进行缩放。

这里的变换的例子：规模 - jsFiddle

下面是我在我的例子中使用的代码：

<div class="box"></div> 

.box { 
    width: 50px; 
    height: 50px; 
    background-color: green; 
    -webkit-transition: 0.1s ease-out; 
    -moz-transition: 0.1s ease-out; 
    -o-transition: 0.1s ease-out; 
    -ms-transition: 0.1s ease-out; 
} 

.box:hover { 
    -webkit-transform: scale(1.4); 
    -moz-transform: scale(1.4); 
    -o-transform: scale(1.4); 
    -ms-transform: scale(1.4); 
}