Html 如何在这里添加叠加效果？CSS

我有这一页：

在这个页面上，你会发现一个产品列表。我想在这个列表中添加一个覆盖效果

代码HTML:

这个代码有什么问题？ 你能帮我解决这个问题吗

---

提前谢谢

下面是一个简单的叠加工作原理示例：

您必须有一个父元素，它必须有一个子元素的绝对位置

您可以这样构建html：

<div class="item">
  <img src="src" alt="tree" />
  <div class="itemOverlay"></div> <!-- OVERLAY -->
</div>

---

因为你没有用代码应用覆盖…你在改变不透明度和背景图像。覆盖必须是单独的元素或伪元素。这在你的代码里是什么？也许是吧？这就是为什么我在这里，因为我不知道。。。如果我只知道发布这个问题。我需要一个example@Dmitriy你的例子很好，但是如果你在我的网站上复制代码不起作用怎么办？您可以做一个测试？示例；添加新代码，从理论上回答问题，在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效

.regular a:hover{
opacity:0.4;
background:url("http://www.altradona.ro/media/wysiwyg/OVERLAY.png");
}

<div class="item">
  <img src="src" alt="tree" />
  <div class="itemOverlay"></div> <!-- OVERLAY -->
</div>

.item{
  width:200px;
  height:200px;
  position:relative;
}
.item img{
  width:100%;
}
.itemOverlay{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:200px;
  height:200px;
  background-color:red;
}
.item:hover .itemOverlay{
  display:block;
}