html - 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 不影响显示:静态元素。我相信您要概述的问题是您的 float 图像只是在较小的图像之前添加到 DOM 中，因此它总是出现在其他图像的后面。

所以我怀疑您必须执行以下操作之一:

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

这就是我能想到的全部。 :-)