How to Create a CSS Image Overlay with Different Heights but Consistent Width?

CSS Overlay on Images: A Comprehensive Guide

Introduction

Creating an image overlay is a common task in web design. It allows you to add text, icons, or other information over an image, creating a visually appealing and informative effect. In this article, we'll explore how to achieve this using CSS, focusing specifically on the case where images have different heights while maintaining a consistent width.

Creating the Image Overlay

To achieve this effect, we'll use a div container to hold the image and the overlay content. The following CSS rules will create the overlay:

.image-container {
    position: relative;
    width: 200px;
}

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

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

HTML Structure

The HTML structure will include the image and the overlay content:

<div class="image-container">
    <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="How to Create a CSS Image Overlay with Different Heights but Consistent Width?" >
    <div class="after">This is some content</div>
</div>

Enhancing the Overlay

To improve the appearance of the overlay, we can add additional CSS styles. For instance:

.image-container .after .content {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    padding: 5px;
}

This will vertically align the overlay content at the bottom.

Customized Demo

Here's a more involved demo with extra styling, such as an icon and text:

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
}

.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);
}

.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;
}

<div class="image-container">
    <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="How to Create a CSS Image Overlay with Different Heights but Consistent Width?" >
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom"><i class="fa fa-search"></i></span>
    </div>
</div>

This updated demo adds an animated zoom icon to the overlay, providing additional visual interest.

The above is the detailed content of How to Create a CSS Image Overlay with Different Heights but Consistent Width?. For more information, please follow other related articles on the PHP Chinese website!