How to Create an Image Overlay with CSS That Works on Images of Varying Heights?-CSS Tutorial-php.cn

How to Create an Image Overlay with CSS That Works on Images of Varying Heights?

Patricia Arquette

Release： 2024-10-31 07:52:02

Original

839 people have browsed it

How to Create an Image Overlay with CSS That Works on Images of Varying Heights?

How to Create an Image Overlay with CSS

The Problem:

You want to place a dark overlay with text and an icon over an image when you hover over it. However, you're facing difficulties as the image heights vary and previous tutorials haven't been successful.

The Solution:

This effect can be achieved with the following CSS code:

<code class="css">.image-container {
  position: relative;
  width: 200px;
  height: 300px;
}

.image-container .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
}

.image-container:hover .after {
  display: block;
  background: rgba(0, 0, 0, .6);
}</code>

Copy after login

HTML:

<code class="html"><div class="image-container">
  <img src="http://lorempixel.com/300/200" />
  <div class="after">This is some content</div>
</div></code>

Copy after login

Additional Styling:

For a more polished look, consider adding the following CSS:

<code class="css">.image-container .after .content {
  position: absolute;
  bottom: 0;
  font-family: Arial;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
}

.image-container .after .zoom {
  color: #DDD;
  font-size: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -19px;
  height: 50px;
  width: 45px;
  cursor: pointer;
}

.image-container .after .zoom:hover {
  color: #FFF;
}</code>

Copy after login

Demo:

See the demo here: http://jsfiddle.net/6Mt3Q/

The above is the detailed content of How to Create an Image Overlay with CSS That Works on Images of Varying Heights?. For more information, please follow other related articles on the PHP Chinese website!