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

时间:2016-11-20 19:36:17

标签: html css

所以我想要的是当一个图像悬停在黑色叠加层上时我添加了:在覆盖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%;
}

1 个答案:

答案 0 :(得分:0)

不幸的是,::before::after等自我关闭元素不支持imginput伪造类。

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