How to Show Text on Image Hover Using HTML and CSS?

How to display text on image hover?

Showing description information when hovering an image is a common requirement. This article explains how to elegantly implement this functionality using HTML and CSS.

Problem

Many developers will use image sprites and hover to implement this feature. However, this method is less than ideal and difficult to produce precise effects. Therefore, this article will show you how to use real text, not images.

Solution

Achieving this feature is easy. Just wrap the image and hover description information in a div with the same dimensions as the image. Then, use CSS to display the description when the div is hovered.

Code Example

The following is using HTML and CSS Code examples to implement this functionality:

HTML:

<div class="img__wrap">
  <img class="img__img" src="image.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

CSS :

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.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;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

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

In the example above: "

<div class="img__wrap">

Wraps the image and description information in one div, the dimensions of this div are the same as the image (200px high, 257px wide).

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

Position the description information in the center of the div before hovering. Hide description information

visibility: hidden;
opacity: 0;

when hovering the div. , display the description information

.

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