圖像更改/放大懸停不影響頁面間距

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