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

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 */
}

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 */
}

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!