Heim > Web-Frontend > CSS-Tutorial > Wie kann ich beim Schweben Text über einem Bild anzeigen, indem ich nur HTML und CSS verwende?

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

Barbara Streisand
Freigeben: 2024-12-05 07:22:14
Original
848 Leute haben es durchsucht

How Can I Display Text Over an Image on Hover Using Only HTML and CSS?

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>

< ;/div>

Bei diesem Ansatz wird der Beschreibungstext effektiv über das Bild gelegt und der Text angezeigt, wenn der Benutzer mit der Maus darüber fährt das Bild, ohne dass die Verwendung von Bild-Sprites erforderlich ist.

Das obige ist der detaillierte Inhalt vonWie kann ich beim Schweben Text über einem Bild anzeigen, indem ich nur HTML und CSS verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage