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>

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>

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>

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!