Displaying Text on Hover Using HTML and CSS
In web design, adding descriptive text that appears when a user hovers over an image enhances the user experience. This text provides valuable information about the image, creating an interactive and engaging browsing experience.
Achieving this effect solely using HTML and CSS is relatively straightforward. Here's how you can do it step by step:
quick reset </em>/</p><ul><li>{<br>margin: 0;<br>padding: 0;<br>border: 0;<br>}</li></ul><p>/<em> relevant styles </em>/<br>.img__wrap {<br> position: relative;<br> height: 200px;<br> width: 257px;<br>}</p><p>.img__description {<br> position: absolute;<br> top: 0;<br> bottom: 0;<br> left: 0;<br> right: 0;<br> background: rgba(29, 106, 154, 0.72);<br> color: #fff;<br> visibility: hidden;<br> opacity: 0;</p><p>/<em> transition effect. not necessary </em>/<br> transition: opacity .2s, visibility .2s;<br>}</p><p>.img__wrap:hover .img__description {<br> visibility: visible;<br> opacity: 1;<br>}
<img class="img__img" src="http://placehold.it/257x200.jpg" /><br> <p></div>
This approach effectively overlays the description text onto the image, displaying the text when the user hovers over the image without requiring the use of image sprites.
The above is the detailed content of How Can I Display Text Over an Image on Hover Using Only HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!