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

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

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

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

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

ここに画像の説明を挿入

実装の鍵となるのはCSSのopacityhoverです。この記事でも主にマスクレイヤーの実装について紹介します。
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 疑似要素について知らないこと

推薦する

Vue-cliはプロジェクトを作成し、プロジェクト構造を分析します

目次1. ディレクトリを入力してプロジェクトを作成する2. 必要な設定項目を選択します2.1 Vue...

Vueでミックスインを使用する方法

目次序文使い方要約する序文Vue にはコードの再利用に使われる mixins という設定項目がありま...

TypeScript で時間を費やした場所の概要

TS で時間を過ごした場所をいくつか記録します。 (まず、文句を言わせてください。stackover...

HTML における相対と絶対の使用法と違いの詳細な説明

HTML における相対と絶対の違い: 正直に言うと、HTML は世界で最もシンプルな言語です。タグ言...

MySQLでANDとORを組み合わせる問題を解決する

以下のように表示されます。 SELECT prod_name,prod_price FROM pro...

ECMAScript の演算子を理解するための記事

目次単項演算子ブール演算子乗算演算子加法演算子関係演算子等価演算子条件演算子代入演算子カンマ演算子要...

Oracle Rownum 書き込みに似た MySQL の詳細な例

Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...

Dockerでローカルマシン(ホストマシン)にアクセスする方法

質問Docker でローカル データベースにアクセスするにはどうすればよいでしょうか? 127.0....

MySQLトランザクションの特徴と分離レベルについてお話ししましょう

インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...

jQueryはフォントサイズ調整ケースを実装します

この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体...

シンプルなプログレスバーを作成するための HTML+CSS

1. HTMLコードコードをコピーコードは次のとおりです。経験値: <span class=...

MySQLで大きなテーブルをエレガントに削除する方法について簡単に説明します

目次1. 切り捨て操作1.1 MySQL truncate はどのような操作を実行しますか? 1.2...

XHTML におけるタイトルタグと段落タグの使用に関する詳細な説明

XHTML 見出しの概要Word 文書を作成するときは、「第 1 章」、「1.2.1」などのタイトル...

Windows 10 での MySQL 5.7.19 インストール チュートリアル MySQL のルート パスワードを忘れた場合の変更方法

MySQL 5.7.19のインストールを例に挙げると、まずダウンロードしますもちろん、最初に行うこと...

MySQL 条件付きクエリと使用法および優先順位の例の分析

この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...