css transform：scale（2,2）彈出後面的其他圖像

Question

我使用Joomla 3.3，並在鼠標懸停時，我想放大圖像。

爲圖片的HTML代碼是：

<img class="enlarge" style="float: right; margin: 10px; border: 5px solid black;" title="Chapter 1: Physical Differences" src="images/chapters/chapter-1-physical-differences.jpg" alt="Chapter 1: Physical Differences" width="311" height="390" /> 

要影響鼠標懸停擴大我用下面的CSS：

.enlarge:hover { 
    transform:scale(2,2); 
    transform-origin:0 0; 
} 

它的偉大工程，但上的右側頁面有一個較小的圖像，大圖像在屏幕上的較小圖像下彈出......這就像我需要設置z-index，但我嘗試過，並沒有改變結果。

前：

鼠標懸停：

Answer 1

的z-index不影響顯示：靜態元素。我相信你所概述的問題是，在較小的圖像之前，您的浮動圖像已經簡單地添加到了DOM中，因此它會始終出現在其他圖像的後面。

所以我懷疑你會做下列之一：

1. 的更大的圖像之前增加了更小的圖像的操作順序。
2. 當較大的圖像被隱藏時隱藏較小的圖像。
3. 將較小的圖像設置爲display：absolute，然後設置較低的z-index。
4. 哈克的東西就像在DOM加載之後移除較小的圖像，然後重新添加它以更改它的默認z順序。
5. 使較大的圖像不是一個浮動，並允許它的大小的變化推動較小的圖像到下一行。

這就是我可以拿出我的頭頂。 :-)