How to Display Text Over an Image on Hover Using HTML and CSS?

Displaying Text on Hover with HTML and CSS

In your quest to showcase text over images on hover, you initially resorted to an image sprite-based solution. However, you now seek a cleaner approach using real text.

The solution lies in employing a div element as a wrapper for both the image and the description. This div should possess the same dimensions as the image. By manipulating CSS, you can then determine the description's visibility when hovering over the div.

A simplified code snippet for achieving this effect:

.image-wrapper {
  position: relative;
  height: [Image height];
  width: [Image width];
}

.image-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: [Description background color];
  color: [Description text color];
  visibility: hidden;
  opacity: 0;
  transition: visibility .2s, opacity .2s;
}

.image-wrapper:hover .image-description {
  visibility: visible;
  opacity: 1;
}

In the HTML:

<div class="image-wrapper">
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="How to Display Text Over an Image on Hover Using HTML and CSS?" >
  <p class="image-description">This is the image description.</p>
</div>

The above is the detailed content of How to Display Text Over an Image on Hover Using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!