如何在此处添加叠加效果？CSS

Question

我有这个页面：

link

在这个页面上，你会找到一个产品列表。我想在这个列表中添加一个叠加效果。

编码 HTML：

<a href="http://www.altradona.ro/lenjerie-sexy/rochii-sexy/rochie-7033-black.html" title="Rochie 7033 black" class="product-image">
      <img src="http://www.altradona.ro/media/catalog/product/cache/1/small_image/252x252/9df78eab33525d08d6e5fb8d27136e95/1/4/1432654037.png" data-srcx2="http://www.altradona.ro/media/catalog/product/cache/1/small_image/504x504/9df78eab33525d08d6e5fb8d27136e95/1/4/1432654037.png" width="252" height="252" alt="Rochie 7033 black">
</a>

我应该将此效果添加到a 标签 您可以检查该站点以查看更清晰的代码，这只是一个示例。

我尝试使用此 CSS 代码但无法正常工作：

代码 CSS：

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

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

提前致谢！

Answer 1

下面是一个覆盖如何工作的简单示例：http://codepen.io/anon/pen/GJxeVo

你必须有一个parent element，其中必须有一个绝对位置的子元素。

你可以这样构建你的html：

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

由于 itemOverlay 类的项目正在被定位：absolute 它将位于该 div 中的所有其他元素之上并创建您的叠加效果。

使用下面的 css 魔法就会发生 :)

.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;
}