Wie kann ich Bild-Hover-Overlays nur mit CSS erstellen?

Bild-Hover-Overlays mit reinem CSS

Mit HTML und CSS können Sie einem Bild ein transparentes schwarzes Overlay hinzufügen, wenn Sie mit der Maus darüber fahren Es. Um dies zu erreichen, ohne ein Overlay-Element zu verwenden, sollten Sie stattdessen ein Pseudoelement verwenden.

Umschließen Sie das Bild mit dem

element:

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

Weisen Sie .image relative Positionierung und optionale Abmessungen zu:

.image {
  position: relative;
  width: 200px;  /* Optional */
  height: 200px;  /* Optional */
}

Stellen Sie das untergeordnete img-Element auf eine Breite von 100 % und eine vertikale Ausrichtung ein.

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

Erstellen Sie ein Pseudoelement, um das Overlay anzuzeigen:

.image:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 1s;
}

Machen Sie das Overlay sichtbar auf schweben:

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

Wenn sich der Cursor nun über dem Bild befindet, wird eine transparente schwarze Überlagerung sanft eingeblendet.

Das obige ist der detaillierte Inhalt vonWie kann ich Bild-Hover-Overlays nur mit CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html using this display

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