Wie kann ich beim Schweben Text über einem Bild anzeigen, indem ich nur HTML und CSS verwende?-CSS-Tutorial-php.cn

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

801 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:

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

Vorheriger Artikel：Wie implementiert man mehrzeilige Textauslassungspunkte mit CSS? Nächster Artikel：Anpassung an Bewegungs- und Themenpräferenzen des Benutzers mit CSS und JavaScript

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

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2123

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2283

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1922

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...