：覆盖之前覆盖时不覆盖图像

Question

所以我想要的是当一个图像悬停在黑色叠加层上时我添加了：在覆盖div之前，然后我将在后面添加文本和图像。使用当前代码，它似乎甚至没有识别悬停。我也在使用粉底。非常感谢帮助：）

<div class="small-12 large-4 columns">
        <img class="tri" src="media/images/mountain.jpg">
      </div>



.tri{
  position: relative;
  overflow: hidden;
  display: block;
}

.tri:before{
  opacity: 0.8%;
  top: 100%;
  width: 100%;
  height: 100%;
  transition: all 0.4s;
  background-color: black;
  position: absolute;
  content: '';

}

.tri:hover::before{
  top: 0%;
}

Answer 1

不幸的是，::before和::after等自我关闭元素不支持img和input伪造类。

您可以在div周围添加一个img，并在其上添加:hover和::before属性。