html - 悬停时图像上的缩放/缩放功能，悬停图像不会是 "on top"。我可以使用 CSS 吗？

Question

所以我有一个问题...嗨，感谢您阅读:
我在 wordpress 中使用“Responsive Flickr Gallery”或“RFG”，我正在尝试实现悬停图像的缩放/缩放。

如:当您将鼠标悬停在图库中的图像上时，该图像将缩放 x2 倍，我正在使用它:

img.rfg-img:hover {
    opacity: 1;
    transform: scale(2);
}

这完全有效。

但是:就好像每个图像都在自己的图层上一样。当我将鼠标悬停在图片 1 上时，它位于其他图片的“下方”。

然而，当我将鼠标悬停在图像 18 上时，它位于所有其他图像的“上方”。我希望所有的图片都像图片 18(第 1 页的最后一张图片)。

我猜你必须让一个 div 以某种方式出现在另一个或其他东西之上，但我不知道该怎么做。

我可以使用 CSS 来做到这一点吗？有可能吗？

这是一个链接:

http://beautifiedbyelsa.se/wordpress/galleri1/

提前谢谢你。

问候，

Answer 1

DOM 下方的元素出现在 DOM 上方的元素前面。 z-index 改变了这种自然的层次结构。为了通过属性更改元素，它需要具有相对、绝对、固定或粘性的 position。 (也称为“定位元素”)

img.rfg-img:hover {
    opacity: 1;
    transform: scale(2);
    position: relative;
    z-index: 1;
}