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不影响display：static元素。我相信你所概述的问题是你的浮动图像只是在较小的图像之前被添加到DOM中，因此它总是会出现在另一个图像的后面。

所以我怀疑你必须做以下其中一项：

1. 在较大图像之前添加较小图像的操作顺序。
2. 在较大的图像被鼠标悬停时隐藏较小的图像。
3. 将较小的图像设置为display：absolute，然后设置较低的z-index。
4. Hacky之类的东西，比如在DOM加载后删除较小的图像，然后重新添加它以更改它的默认z顺序。
5. 使较大的图像不是浮动的，并允许它改变大小以将较小的图像推到下一行。

这就是我能想到的一切。 ： - ）