Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich mithilfe von Pseudoelementen ein unsichtbares schwarzes CSS-Overlay für den Bildschwebeflug?

Wie erstelle ich mithilfe von Pseudoelementen ein unsichtbares schwarzes CSS-Overlay für den Bildschwebeflug?

Barbara Streisand
Freigeben: 2024-12-08 10:03:10
Original
755 Leute haben es durchsucht

How to Create a CSS Invisible Black Overlay on Image Hover Using Pseudo-Elements?

Unsichtbares schwarzes CSS-Overlay beim Hover

Mit reinem CSS ist es tatsächlich möglich, beim Hover ein transparentes schwarzes Overlay auf einem Bild zu erzielen. Allerdings ist der in Ihrem ersten Codebeispiel erwähnte Ansatz, der die Verwendung eines Overlay-Div beinhaltet, aufgrund von Problemen mit der Positionierung und Sichtbarkeit möglicherweise nicht geeignet.

Eine effektivere Lösung ist die Verwendung eines Pseudoelements. So funktioniert es:

CSS-Code

.image {
  position: relative;
  /* Set dimensions as needed (or omit for responsiveness) */
  width: 400px;
  height: 400px;
}

.image img {
  width: 100%;
  vertical-align: top;
}

.image:after {
  content: '\A'; /* Pseudo content to trigger browser rendering */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6); /* Black with 60% opacity */
  opacity: 0; /* Initially invisible */
  transition: all 1s; /* Animation transition */
}

.image:hover:after {
  opacity: 1; /* Shows overlay on hover */
}
Nach dem Login kopieren

Erklärung

  1. Wir verwenden ein Div mit Klasse „image“, um das Bild einzuschließen. Es ist relativ positioniert, damit das Pseudoelement innerhalb seiner Grenzen positioniert werden kann.
  2. Wir gestalten das untergeordnete img-Element so, dass es eine Breite von 100 % und eine vertikale Ausrichtung nach oben hat.
  3. Das Pseudo -element (.image:after) wird absolut innerhalb des Bilddivs positioniert. Ihm wird zunächst eine Deckkraft von 0 zugewiesen, wodurch es unsichtbar wird.
  4. Beim Schweben (.image:hover:after) ändert sich die Deckkraft des Pseudoelements auf 1, wodurch es sichtbar wird und effektiv die schwarze Überlagerung entsteht.

Zusätzliche Funktionen

Text Zusatz:
Um beim Hover Text zum Overlay hinzuzufügen, können Sie die Content-Eigenschaft im Stil des Pseudoelements verwenden. Zum Beispiel:

.image:after {
  content: 'Hover Text...'; /* Custom overlay text */
}
Nach dem Login kopieren

Anpassung:
Sie können die Deckkraft und Übergangsgeschwindigkeit anpassen, um den Sichtbarkeitseffekt zu ändern. Darüber hinaus können Sie Hintergrundbilder oder Farbverläufe hinzufügen, um komplexere Überlagerungen zu erstellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von Pseudoelementen ein unsichtbares schwarzes CSS-Overlay für den Bildschwebeflug?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage