Wie zeige ich mithilfe von HTML und CSS beim Hover Text über einem Bild an?

Text beim Hover mit HTML und CSS anzeigen

Bei Ihrem Bestreben, beim Hover Text über Bildern anzuzeigen, haben Sie zunächst auf ein Bild-Sprite zurückgegriffen -basierte Lösung. Allerdings suchen Sie jetzt nach einem saubereren Ansatz mit echtem Text.

Die Lösung besteht darin, ein div-Element als Wrapper sowohl für das Bild als auch für die Beschreibung zu verwenden. Dieses Div sollte die gleichen Abmessungen wie das Bild haben. Durch Bearbeiten von CSS können Sie dann die Sichtbarkeit der Beschreibung bestimmen, wenn Sie mit der Maus über das Div fahren.

Ein vereinfachtes Code-Snippet, um diesen Effekt zu erzielen:

.image-wrapper {
  position: relative;
  height: [Image height];
  width: [Image width];
}

.image-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: [Description background color];
  color: [Description text color];
  visibility: hidden;
  opacity: 0;
  transition: visibility .2s, opacity .2s;
}

.image-wrapper:hover .image-description {
  visibility: visible;
  opacity: 1;
}

Im HTML:

<div class="image-wrapper">
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Wie zeige ich mithilfe von HTML und CSS beim Hover Text über einem Bild an?" >
  <p class="image-description">This is the image description.</p>
</div>

Das obige ist der detaillierte Inhalt vonWie zeige ich mithilfe von HTML und CSS beim Hover Text über einem Bild an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!