Wie kann ich beim Schweben Text über einem Bild anzeigen, indem ich nur HTML und CSS verwende?

Anzeigen von Text beim Hover mithilfe von HTML und CSS

Im Webdesign verbessert das Hinzufügen von beschreibendem Text, der angezeigt wird, wenn ein Benutzer mit der Maus über ein Bild fährt, das Benutzererfahrung. Dieser Text liefert wertvolle Informationen über das Bild und sorgt so für ein interaktives und ansprechendes Surferlebnis.

Diesen Effekt ausschließlich mit HTML und CSS zu erzielen, ist relativ einfach. So können Sie es Schritt für Schritt machen:

1. Wickeln Sie das Bild und den Hover-Text in ein Container-Div:
   Erstellen Sie ein Div um das Bild und den Text das wird beim Schweben angezeigt. Dieses Div sollte die gleiche Höhe und Breite wie das Bild haben.
2. Positionieren Sie den Hover-Text absolut innerhalb des Container-Div:
   Positionieren Sie den Hover-Text mithilfe von CSS absolut innerhalb des Container-Div . Legen Sie die Position auf „absolut“ fest, wobei „oben“, „unten“, „links“ und „rechts“ auf 0 gesetzt sind, um eine korrekte Ausrichtung im Bild zu gewährleisten. Stellen Sie zunächst die Sichtbarkeit auf „Ausgeblendet“ und die Deckkraft auf 0 ein.
3. Passen Sie den Hover-Effekt an:
   Verwenden Sie abschließend einen Hover-Effekt auf dem Container-Div, um den Hover-Text anzuzeigen. Wenn der Benutzer mit der Maus über das Bild fährt, sollte der Hovertext sichtbar und vollständig undurchsichtig werden, indem er seine Sichtbarkeit auf sichtbar und die Deckkraft auf 1 setzt.

 Schnell-Reset </em>/</p><ul><li>{<br>margin: 0;<br>padding: 0;<br>border: 0;<br>}</li></ul><p>/<em> relevante Stile </em>/<br>.img__wrap {<br> Position: relativ;<br> Höhe: 200px;<br> Breite: 257px;<br>}</p><p>.img__description {<br> Position: absolut;<br> oben: 0;<br> unten: 0;<br> links: 0;<br> rechts: 0; <br> Hintergrund: rgba(29, 106, 154, 0,72);<br> Farbe: #fff;<br> Sichtbarkeit: ausgeblendet;<br> Deckkraft: 0;</p><p>/<em> Übergangseffekt. nicht notwendig </em>/<br> Übergang: Deckkraft .2s, Sichtbarkeit .2s;<br>}</p><p>.img__wrap:hover .img__description {<br> Sichtbarkeit: sichtbar;<br> Deckkraft: 1; <br>}

 <img class="img__img" src="http://placehold.it/257x200.jpg" /><br> <p></div>