How Can I Display Text Over an Image on Hover Using Only HTML and CSS?-CSS Tutorial-php.cn

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

Barbara Streisand

Release： 2024-12-05 07:22:14

Original

739 people have browsed it

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

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:

Wrap the image and the hover text in a container div:
Create a div around both the image and the text that will appear on hover. This div should have the same height and width as the image.
Position the hover text absolutely within the container div:
Using CSS, position the hover text absolutely within the container div. Set its position to absolute, with top, bottom, left, and right set to 0 to align correctly within the image. Initially, set its visibility to hidden and opacity to 0.
Adjust the hover effect:
Finally, use a hover effect on the container div to reveal the hover text. When the user hovers over the image, the hover text should become visible and fully opaque by setting its visibility to visible and opacity to 1.

 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!