：覆盖前没有掩盖图像时掩藏在

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 psuedoclasses不支持自闭的元素，如img和input。

您可以简单地在img周围换一个div，并将:hover和::before属性放在上面。