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

<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!