縮放圖像會影響目標圖像周圍的其他元素

基本上我正在試圖在一行中放置一組圖像，並且每當我將鼠標懸停在其中一個圖像上時應放大圖像並獲得紅色邊框。縮放圖像會影響目標圖像周圍的其他元素

我爲此使用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.

來源

2013-05-15 SimplyZ

您應該添加

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

說明：

如果你瞭解CSS盒子模型架構

enter image description here

邊框佔用空間元素，而不是元素內部，所以當你在懸停時使用邊框時，它實際上會佔用元素周圍的空間，並推動其他元素e，因此爲了防止這種情況，我們使用透明顏色的邊框來欺騙那個地方。

如果你願意，你也可以使用新的CSS3屬性，這就是所謂box-sizing: border-box

完整的跨瀏覽器

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

這是什麼呢？

邊框，填充等將箱內進行計數計算之外，所以你也可以

來源

2013-05-15 09:45:05

簡單的認沽邊框透明

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

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

來源

2013-05-15 09:38:17

他應該得到更大的利用這些屬性，如果你不需要transparent邊框代替：對 – DiederikEEn

'+1 '但你應該真的解釋一下它爲什麼解決了這個問題 – andyb

fiddle

看看這裏的fiddl e 你擴展到1，這是他已經是。我把它改爲1.3 :)

來源

2013-05-15 09:42:30 DiederikEEn

縮放圖像會影響目標圖像周圍的其他元素

回答

相關問題