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)基本要素と属性の練習(自分でコードを書く)
目次インデックスモデルB+ツリーインデックスの選択インデックスの最適化インデックスの選択性カバーイン...
Linux viコマンドの詳しい説明vi エディタは、すべての Unix および Linux システ...
MySQL データベースを使用すると、他のユーザーが定義したストアド プロシージャを他のユーザーが変...
背景: SAP ECC サーバーをインストールし、XP をプレインストールしたいと考えています。XP...
目次1. pidファイルの紹介2.ソケットファイルの紹介要約:ソケット ファイル: Unix ドメイ...
0x00 はじめにWordPress は、世界で最も人気のある CMS システムです。PHP と M...
導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...
Vueに触れたばかりのパートナーの多くは、開発環境ではVueプロジェクトは正常であるが、パッケージ化...
1pxの線が太くなる理由モバイルプロジェクトに取り組むとき、設計図に従って要素ノードのサイズとスタイ...
Server-Uソフトウェアの紹介Server-U は非常に強力なファイル マネージャーです。FTP...
序文:データベースの運用や保守の際には、リンクの総数がいくつあるか、アクティブなリンクがいくつあるか...
実行中のコンテナが終了したときに、コンテナが完全に終了する前に環境をクリーンアップするなど、いくつか...
目次1. 理論シリアル化可能繰り返し読み取りコミットされた読み取りコミットされていない読み取り2. ...
序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...
目次フロントエンド上記のアイデアに従って、ページめくり機能を設計して記述します。バックエンド(Jav...