How Can I Display Text Over an Image on Hover Using Real Text?-CSS Tutorial-php.cn

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

Patricia Arquette

Release： 2024-12-12 16:37:10

Original

305 people have browsed it

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.

  <img class="img__img" src="http://placehold.it/257x200.jpg" /><br>  <p></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];
}

Copy after login

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

.img__description {<br>  position: absolute;<br>  top: 0;<br>  bottom: 0;<br>  left: 0;<br>  right: 0;<br>  background: rgba(0, 0, 0, 0.7);<br>  color: #fff;<br>  visibility: hidden;<br>  opacity: 0;<br>}</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></div>
</div>

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

<div>

Copy after login

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!