CSSマウスを画像の上に置いたときにマスクレイヤー効果を追加する実装

まず効果を見てみましょう:

大きな写真の壁掛け用挿入物の写真の説明はこちら

マウスを画像の上に移動すると、影の効果とテキスト/アイコンが追加されます

ここに画像の説明を挿入

実装の鍵となるのはCSSのopacityとhoverです。この記事でも主にマスクレイヤーの実装について紹介します。
HTML:

<div class="img_div">
   <img src="item.image_base64" @click="deleteImg" class="imgCSS">
   <div class="mask">
     <h3><アイコン タイプ="ios-trash-outline" サイズ="40"></アイコン></h3>
   </div>
 </div>

CSS: [上記画像の実装に関係のないコードをいくつか削除しました]

キーコードは
親要素 img_div には display: block; position: relative; が必要です。
子要素マスクレイヤーの位置: absolute; 不透明度: 0; ポインターイベント: none;
マウスをホバーすると不透明度: 1;
その他はビジネスニーズに応じて改善できる

ポインターイベント:noneの目的は、マスクレイヤーの絶対位置がある場合に、画像をクリックしてもコード内のdeleteImgイベントなどのイベントをトリガーできないという問題を解決することであることに注意してください。

.img_div {
    境界線の半径: 10px;
    表示: ブロック;
    位置: 相対的;
  }
  .imgCSS {
    高さ: 100%;
    幅: 100%;
    境界線の半径: 10px;
    表示: ブロック;
    カーソル: ポインタ;
  }
   。マスク {
   位置: 絶対;
   背景: rgba(101, 101, 101, 0.6);
   色: #ffffff;
   不透明度: 0;
   上: 0;
   右: 0;
   幅: 100%;
   高さ: 100%;
   境界線の半径: 10px;
   ポインタイベント:なし;
 }
  .マスクh3{
    テキスト配置: 中央;
    上マージン: 25%;
  }
  .img_div:hover .mask {
    不透明度: 1;
  }

マウスを画像の上に置いたときに CSS マスクレイヤー効果を実装する方法についての記事はこれで終わりです。CSS マウスホバー画像マスクレイヤーの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTMLを使用してスクリーンショットを撮り、ローカル画像として保存するための実装コード

>>: CSS の ::before と ::after 疑似要素について知らないこと