Heim >Web-Frontend >CSS-Tutorial >Wie füge ich Bildern beim Schweben mit CSS eine schwarze, transparente Überlagerung mit Text hinzu?

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

Barbara Streisand
Barbara StreisandOriginal
2024-12-07 10:36:17660Durchsuche

How to Add a Black Transparent Overlay with Text to Images on Hover Using CSS?

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="image.jpg" 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="image.jpg" 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!

Stellungnahme:
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