Kann CSS eine transparente schwarze Überlagerung beim Schweben von Bildern erstellen?

Schwarze transparente Überlagerung auf Bild-Hover mit CSS: Ein detaillierter Ansatz

Abfrage:

Kann ich eine transparente schwarze Überlagerung erstellen, die angezeigt wird, wenn ich den Mauszeiger über ein Bild bewege? CSS?

Antwort:

Ja, Sie können mit CSS einen transparenten schwarzen Overlay-Effekt beim Hovern von Bildern erzielen. So geht's:

Alternativer Ansatz mit Pseudoelementen:

Anstatt ein Overlay-Element zu verwenden, können Sie ein Pseudoelement auf dem Bild nutzen. Diese Methode verbessert die Reaktionsfähigkeit und Vielseitigkeit:

HTML:

<div class="image">
    <img src="image.jpg" alt="" />
</div>

CSS:

.image {
  position: relative;
  /* Optional dimensions */
}

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

.image:after {
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}

.image:hover:after {
  opacity: 1;
}

Erklärung:

• Position: relativ zu Das .image-Element ermöglicht es dem Pseudoelement, sich relativ zu seinem übergeordneten Element zu positionieren.
• vertical-align: top fixiert die Grundlinienausrichtung auf dem Bild.
• Das :after-Pseudoelement erstellt die Überlagerung mit absolute Positionierung und ein schwarzer halbtransparenter Hintergrund.
• Für einen sanften Übergang wird ein Deckkraftübergang angewendet Hover.

Hinzufügen von Text beim Hover (Optional):

Um Text beim Hover anzuzeigen, setzen Sie die Inhaltseigenschaft des Pseudoelements auf den gewünschten Text:

.image:after {
  content: 'Hover Text';
  /* Other styling... */
}

Das obige ist der detaillierte Inhalt vonKann CSS eine transparente schwarze Überlagerung beim Schweben von Bildern erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!