Wie zeige ich Text beim Schweben eines Bildes mit HTML und CSS an?

Wie zeige ich Text beim Schweben des Bildes an?

Das Anzeigen von Beschreibungsinformationen beim Bewegen des Mauszeigers über ein Bild ist eine häufige Anforderung. In diesem Artikel wird erläutert, wie Sie diese Funktionalität mithilfe von HTML und CSS elegant implementieren.

Problem

Viele Entwickler verwenden Bild-Sprites und Hover, um diese Funktion zu implementieren. Diese Methode ist jedoch alles andere als ideal und es ist schwierig, präzise Effekte zu erzielen. Daher zeigt Ihnen dieser Artikel, wie Sie echten Text und keine Bilder verwenden.

Lösung

Diese Funktion zu erreichen ist einfach. Wickeln Sie einfach das Bild und die Hover-Beschreibungsinformationen in ein Div mit den gleichen Abmessungen wie das Bild ein. Verwenden Sie dann CSS, um die Beschreibung anzuzeigen, wenn Sie den Mauszeiger über das Div bewegen.

Codebeispiel

Im Folgenden wird HTML und CSS verwendet Codebeispiele zur Implementierung dieser Funktionalität:

HTML:

<div class="img__wrap">
  <img class="img__img" src="image.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

CSS :

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

Im obigen Beispiel: „

<div class="img__wrap">

Verbindet die Bild- und Beschreibungsinformationen in einem div, die Abmessungen dieses div sind die gleichen wie das Bild (200px hoch, 257px breit) Positionieren Sie die Beschreibungsinformationen in der Mitte des div, bevor Sie den Mauszeiger darauf bewegen

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

beim Bewegen des Div. , zeigen Sie die Beschreibungsinformationen an

.

Das obige ist der detaillierte Inhalt vonWie zeige ich Text beim Schweben eines Bildes mit HTML und CSS an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!