まず効果を見てみましょう: マウスを画像の上に移動すると、影の効果とテキスト/アイコンが追加されます 実装の鍵となるのはCSSのopacityとhoverです。この記事でも主にマスクレイヤーの実装について紹介します。 <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: [上記画像の実装に関係のないコードをいくつか削除しました] キーコードは ポインターイベント: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 疑似要素について知らないこと
目次1. ディレクトリを入力してプロジェクトを作成する2. 必要な設定項目を選択します2.1 Vue...
目次序文使い方要約する序文Vue にはコードの再利用に使われる mixins という設定項目がありま...
TS で時間を過ごした場所をいくつか記録します。 (まず、文句を言わせてください。stackover...
HTML における相対と絶対の違い: 正直に言うと、HTML は世界で最もシンプルな言語です。タグ言...
以下のように表示されます。 SELECT prod_name,prod_price FROM pro...
目次単項演算子ブール演算子乗算演算子加法演算子関係演算子等価演算子条件演算子代入演算子カンマ演算子要...
Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...
質問Docker でローカル データベースにアクセスするにはどうすればよいでしょうか? 127.0....
インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...
この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体...
1. HTMLコードコードをコピーコードは次のとおりです。経験値: <span class=...
目次1. 切り捨て操作1.1 MySQL truncate はどのような操作を実行しますか? 1.2...
XHTML 見出しの概要Word 文書を作成するときは、「第 1 章」、「1.2.1」などのタイトル...
MySQL 5.7.19のインストールを例に挙げると、まずダウンロードしますもちろん、最初に行うこと...
この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...