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

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)基本要素と属性の練習(自分でコードを書く)

推薦する

MySQLのインデックス選択と最適化の詳細な説明

目次インデックスモデルB+ツリーインデックスの選択インデックスの最適化インデックスの選択性カバーイン...

Linux viコマンドの知識ポイントと使い方のまとめ

Linux viコマンドの詳しい説明vi エディタは、すべての Unix および Linux システ...

MySQL ストアド プロシージャ関連の権限変更の問題

MySQL データベースを使用すると、他のユーザーが定義したストアド プロシージャを他のユーザーが変...

VMware インストール エラー VMware Workstation が VMware 認証サービスを開始できませんでした

背景: SAP ECC サーバーをインストールし、XP をプレインストールしたいと考えています。XP...

MySQL の pid とソケットの詳細な説明

目次1. pidファイルの紹介2.ソケットファイルの紹介要約:ソケット ファイル: Unix ドメイ...

nginx+WordPressで個人ブログを構築するプロセス全体の詳細な説明

0x00 はじめにWordPress は、世界で最も人気のある CMS システムです。PHP と M...

JSはビデオの再生速度を制御するための簡単なサンプルコードを実装します

導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...

vue.js パッケージ化プロジェクトの後の空白ページの解決策

Vueに触れたばかりのパートナーの多くは、開発環境ではVueプロジェクトは正常であるが、パッケージ化...

モバイル開発における 1px ラインの理解と解決策

1pxの線が太くなる理由モバイルプロジェクトに取り組むとき、設計図に従って要素ノードのサイズとスタイ...

Server-U 14バージョンのインストールと使用方法

Server-Uソフトウェアの紹介Server-U は非常に強力なファイル マネージャーです。FTP...

MySQL リンクを表示し、異常なリンクを削除する方法

序文:データベースの運用や保守の際には、リンクの総数がいくつあるか、アクティブなリンクがいくつあるか...

Docker コンテナの正常なシャットダウン前にトラップを使用して環境のクリーンアップを実行する

実行中のコンテナが終了したときに、コンテナが完全に終了する前に環境をクリーンアップするなど、いくつか...

トランザクション分離レベルのMySQLケース分析

目次1. 理論シリアル化可能繰り返し読み取りコミットされた読み取りコミットされていない読み取り2. ...

MySQL の遅いクエリとクエリ再構築方法の記録

序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...

React ページ ターナーの実装 (フロント エンドとバックエンドを含む)

目次フロントエンド上記のアイデアに従って、ページめくり機能を設計して記述します。バックエンド(Jav...