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

Patricia Arquette
Release: 2024-10-30 10:09:27
Original
424 people have browsed it

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);
}
Copy after login

HTML Structure

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

<div class="image-container">
    <img src="image.jpg">
    <div class="after">This is some content</div>
</div>
Copy after login

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;
}
Copy after login

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;
}
Copy after login
<div class="image-container">
    <img src="image.jpg">
    <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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!