Html 半透明背景变暗图像

我有一个带有背景图像的容器，它在悬停时添加了半透明背景。以下是我的（简化）HTML：

---

但是，当我将鼠标悬停在容器上时，它的背景图像不仅受到黑色背景的影响，而且图像也受到黑色背景的影响，就好像图像位于叠加背景下一样，使其稍微变暗。我试图通过将图像的z索引设置为3来解决这个问题，但它仍然变暗

z-index

仅适用于已定位的元素，因此为图像指定

位置：相对
并增加其
z-index

<div class="container">
  <div class="overlay"></div>
    <img src="hi.jpg">
</div>

.container:hover > .overlay {
  background-color: black;
  height: 100%;
  position: absolute;
  width: 100%;
  opacity: .2
}