CSSはマウスが画像に移動したときにマスク効果を実現します

<div class="img_div">
    <img src="./images/paella-dish.jpg">
 
        <a href="#">
            <div class="mask">
               <h3>食べ物の写真</h3>
                </div>
        </a>
</div>

.img_div {
    マージン: 20px 400px 0 400px;
    位置: 相対的;
    幅: 531ピクセル;
    高さ: 354px;
}
。マスク {
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 531ピクセル;
    高さ: 354px;
    背景: rgba(101, 101, 101, 0.6);
    色: #ffffff;
    不透明度: 0;
}
.マスクh3{
    テキスト配置: 中央;
}

.img_div a:hover .mask {
    不透明度: 1;           
}