How Can I Display Text Over an Image on Hover Using Real Text?

Display Text on Hover Using Real Text

You can display text over an image on hover using real text instead of image sprites. Here's how:

Wrap the image and the description you want to appear on hover within a container div. This div should have the same dimensions as the image.

<div><div class="snippet-code">
<pre> <img class="img__img" src="http://placehold.it/257x200.jpg" />
<p></div></pre>
</div>
</div>

Assign the following CSS to the container div (.img__wrap):

.img__wrap {
  position: relative;
  height: [Set to match image height];
  width: [Set to match image width];
}

Position the text description absolutely within the container div (.img__description).

<div><div class="snippet-code">
<pre>.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
color: #fff;
visibility: hidden;
opacity: 0;
}

</div>
</div>

Make the text description visible and opaque on hover by adding the following CSS:

<div>

</div>
</div>

With this solution, your text description will appear over the image when the user hovers over.

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