How Can I Create a Hover Effect to Display Text Over an Image Using HTML and CSS?

Hover to Reveal Text on Images with HTML and CSS

Creating a hover effect to display text over an image may seem like a daunting task, but with the help of HTML and CSS, it's a surprisingly straightforward process.

The Problem: Image Sprites with Limited Functionality

Many developers initially resort to using image sprites, where different hover states are displayed by shifting the background image position. However, this approach has limitations, as it does not allow for the use of actual text.

The Solution: Transparent Image Overlay

To achieve the desired effect, we can wrap both the image and the hover text in a single container with the exact same dimensions as the image. Using CSS, we will position the hover text absolutely within this container and make it invisible by default.

.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
}

When the user hovers over the container, we use CSS hover to gradually reveal the hover text:

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

HTML Markup

<div class="img__wrap">
  <img  class="img__img lazy" src="/static/imghwm/default1.png" data-src="http://placehold.it/257x200.jpg" alt="How Can I Create a Hover Effect to Display Text Over an Image Using HTML and CSS?" >
  <p class="img__description">This image looks super neat.</p>
</div>

With this technique, you can easily display dynamic text over images on hover, giving your website a polished and interactive touch.

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