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

1.マスクレイヤーのHTMLコードと画像をdivに配置する

.img_div に入れました。

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

2. 画像とマスクレイヤーにスタイルを追加する

画像: 相対

マスクレイヤー: 絶対

2 つのスタイルを重ね合わせます。

マウスが画像上にない場合、マスクレイヤーには .mask { opacity: 0; } は表示されません。

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

3. ホバーを使用する

透明度を変更して、マスクレイヤーが透けて見えるようにします。

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

効果画像:

要約する

上記は、マウスが画像に移動したときにマスクレイヤー効果を実現するために紹介した CSS です。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: JavaScript の for/of、for/in の詳細な紹介

>>: HTML独習の旅（I）基本要素と属性の練習（自分でコードを書く）