Wie kann ich mit HTML und CSS einen Hover-Effekt erstellen, um Text über einem Bild anzuzeigen?

Hovern, um Text auf Bildern mit HTML und CSS anzuzeigen

Das Erstellen eines Hover-Effekts, um Text über einem Bild anzuzeigen, kann wie eine entmutigende Aufgabe erscheinen , aber mit Hilfe von HTML und CSS ist es ein überraschend unkomplizierter Prozess.

Das Problem: Bild-Sprites mit eingeschränkter Funktionalität

Viele Entwickler greifen zunächst auf die Verwendung von Bild-Sprites zurück, bei denen durch Verschieben der Position des Hintergrundbilds unterschiedliche Hover-Zustände angezeigt werden. Dieser Ansatz weist jedoch Einschränkungen auf, da er die Verwendung von tatsächlichem Text nicht zulässt.

Die Lösung: Transparente Bildüberlagerung

Um den gewünschten Effekt zu erzielen, haben wir kann sowohl das Bild als auch den Hover-Text in einen einzigen Container einschließen, der genau die gleichen Abmessungen wie das Bild hat. Mithilfe von CSS positionieren wir den Hover-Text absolut innerhalb dieses Containers und machen ihn standardmäßig unsichtbar.

.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;
}

Wenn der Benutzer mit der Maus über den Container fährt, verwenden wir CSS-Hover, um den Hover-Text nach und nach anzuzeigen:

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

HTML-Markup

<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

Mit dieser Technik können Sie problemlos dynamischen Text über Bildern anzeigen beim Hover, um Ihrer Website einen ausgefeilten und interaktiven Touch zu verleihen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit HTML und CSS einen Hover-Effekt erstellen, um Text über einem Bild anzuzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!