：オーバーレイの前に画像が覆われていない

Question

だから私が望むのは、画像が黒いオーバーレイの上にぶら下がっているときに：beforeが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プロパティを追加することができます。