Wie füge ich Bildern beim Schweben mit CSS eine schwarze, transparente Überlagerung mit Text hinzu?

Hinzufügen einer schwarzen transparenten Überlagerung zu Bildern beim Schweben mit CSS

Das Erstellen einer schwarzen transparenten Überlagerung auf einem Bild beim Schweben ist mit CSS möglich. Hier ist eine umfassende Anleitung, um dies zu erreichen:

Ein Pseudoelement verwenden

Um das Problem mit Overlay-Elementen auf eingeschlossenen img-Elementen zu vermeiden, können Sie ein Pseudoelement darin einfügen Ort. Wickeln Sie das img-Element als solches ein:

<div class="image">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="">
</div>

Konfigurieren Sie das CSS:

.image {
  position: relative;
  width: 400px;
  height: 400px;
}
.image img {
  width: 100%;
  vertical-align: top;
}
.image:after {
  content: '\A';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}
.image:hover:after {
  opacity: 1;
}

Hinzufügen von Text beim Hover

Fügen Sie der Einfachheit halber Text ein als Inhaltswert des Pseudoelements:

.image:after {
  content: 'Your Text';
  color: #fff;
}

Alternativ können Sie den Text in einem data-*-Attribut für festlegen einzigartige Textanzeige:

.image:after {
  content: attr(data-content);
  color: #fff;
}

<div data-content="Text to Display" class="image">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="">
</div>

Kombination von Overlay und Text

Separate Gestaltung ermöglicht eine unabhängige Positionierung von Elementen:

.image:after, .image:before {
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
}
.image:after {
  content: '\A';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.image:before {
  content: attr(data-content);
  width: 100%;
  color: #fff;
  z-index: 1;
  bottom: 0;
  padding: 4px 10px;
  text-align: center;
  background: #f00;
  box-sizing: border-box;
}
.image:hover:after, .image:hover:before {
  opacity: 1;
}

Das obige ist der detaillierte Inhalt vonWie füge ich Bildern beim Schweben mit CSS eine schwarze, transparente Überlagerung mit Text hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!