Home >Web Front-end >CSS Tutorial >How to Display Text Over an Image on Hover Using HTML and CSS?

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

Barbara Streisand
Barbara StreisandOriginal
2024-12-10 06:13:13439browse

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="image.jpg" />
  <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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn