Implementierung zum Hinzufügen eines Maskenebeneneffekts, wenn die CSS-Maus über dem Bild schwebt

Implementierung zum Hinzufügen eines Maskenebeneneffekts, wenn die CSS-Maus über dem Bild schwebt

Erster Blick auf die Wirkung:

Eine große Bilderwand, Bildbeschreibung hier einfügen

Wenn die Maus über das Bild bewegt wird, fügen Sie Schatteneffekt + Text/Symbol hinzu

Bildbeschreibung hier einfügen

Der Schlüssel zur Implementierung sind CSS- Deckkraft und Hover . Dieser Artikel stellt auch hauptsächlich die Implementierung der Maskenebene vor.
HTML:

<div Klasse="img_div">
   <img src="item.image_base64" @click="deleteImg" class="imgCSS">
   <div Klasse="Maske">
     <h3><Symboltyp="ios-trash-outline" Größe="40"></Symbol></h3>
   </div>
 </div>

CSS: [Einige Codes gelöscht, die nichts mit der Implementierung des obigen Bildes zu tun haben]

Ich glaube der Schlüsselcode ist
Das übergeordnete Element img_div sollte „display: block; position: relative“ haben.
Position der Maskenebene des untergeordneten Elements: absolut; Deckkraft: 0; Zeigerereignisse: keine;
Wenn die Maus schwebt, Deckkraft: 1;

Andere können je nach Geschäftsanforderungen verbessert werden

Es sollte darauf hingewiesen werden, dass der Zweck von pointer-events:none darin besteht, das Problem zu lösen, dass bei einer absoluten Positionierung der Maskenebene ein Klicken auf das Bild kein Ereignis auslösen kann, wie beispielsweise das deleteImg-Ereignis im Code.

.img_div {
    Rahmenradius: 10px;
    Anzeige: Block;
    Position: relativ;
  }
  .imgCSS {
    Höhe: 100%;
    Breite: 100 %;
    Rahmenradius: 10px;
    Anzeige: Block;
    Cursor: Zeiger;
  }
   .Maske {
   Position: absolut;
   Hintergrund: rgba(101, 101, 101, 0,6);
   Farbe: #ffffff;
   Deckkraft: 0;
   oben: 0;
   rechts: 0;
   Breite: 100 %;
   Höhe: 100%;
   Rahmenradius: 10px;
   Zeigerereignisse: keine;
 }
  .mask h3 {
    Textausrichtung: zentriert;
    oberer Rand: 25 %;
  }
  .img_div:hover .mask {
    Deckkraft: 1;
  }

Dies ist das Ende dieses Artikels über die Implementierung des CSS-Maskenebeneneffekts, wenn die Maus über ein Bild fährt. Weitere relevante CSS-Inhalte zur Bildmaskenebene beim Überfahren mit der Maus finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Dinge, die Sie nicht über die CSS-Pseudoelemente ::before und ::after wissen

>>:  Installieren Sie Linux mithilfe einer virtuellen VMware-Maschine (CentOS7-Image).

Artikel empfehlen

Kleines Programm zur Implementierung eines einfachen Taschenrechners

In diesem Artikelbeispiel wird der spezifische Co...

Eine kurze Diskussion zum Implementierungsprinzip des Vue-Slots

Inhaltsverzeichnis 1. Beispielcode 2. Sehen Sie d...

Details zum Like-Operator in MySQL

1. Einleitung Beim Filtern unbekannter oder teilw...

Detaillierte Erklärung des Sandbox-Mechanismus von Vue3

Inhaltsverzeichnis Vorwort Browser kompilierte Ve...

Detaillierte Schritte zur Installation von Docker in 5 Minuten

Für die Installation von Docker auf CentOS muss d...

Linux verwendet iftop, um den Netzwerkkartenverkehr in Echtzeit zu überwachen

Linux verwendet iftop, um den Verkehr der Netzwer...

So ändern Sie schnell die Tabellenstruktur einer MySQL-Tabelle

Tabellenstruktur einer MySQL-Tabelle schnell ände...

Der einfachste Weg zum Debuggen gespeicherter Prozeduren in MySQL

Ein Kollege hat mir einmal gesagt, ich solle eine...

Einführung in RHCE-Bridging, passwortfreie Anmeldung und Portnummernänderung

Inhaltsverzeichnis 1. Konfigurieren Sie Bridging ...

WeChat-Applet zum Speichern von Alben und Bildern in Alben

Ich entwickle derzeit eine Video- und Tool-App, ä...