Creating an Overlay Effect on Images with CSS

In this article, we will explore how to achieve the effect of a dark overlay with text and an icon when hovering over an image using CSS.

Problem:

You aim to create an interactive image gallery where hovering over an image displays a dark overlay with custom content, as illustrated in the image provided. The challenge lies in achieving this effect for images of varying heights, with a consistent width.

Solution:

To accomplish this, we employ a combination of HTML and CSS as follows:

HTML Markup:

`

<img src="image-url" />
<div class="after">This is some content</div>

CSS Style Rules:

<code class="css">.image-container {
    position: relative;
    width: <fixed width>;
}
.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>

In this code, .image-container serves as a wrapper for the image and the overlay div. The positioning of .after ensures that the overlay covers the entire image, while the conditional display property makes the overlay visible only on hover. You can customize the appearance of the overlay by modifying the background color and content within the .after div.

Customization:

The provided solution serves as a basic template, and you can enhance its aesthetics by adding additional CSS rules. For instance, you can align the content vertically within the overlay, change the icon style, or include transition properties for smoother hover animations.

Here's a modified example with extra styling:

<code class="css">.image-container .after .content {
    position: absolute;
    bottom: 5px;
    text-align: center;
    width: 100%;
    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>

In this updated code, the overlay content is positioned at the bottom with centered alignment. Additionally, a zoom icon has been added, which changes color on hover. These customizations demonstrate the flexibility of the provided solution and empower you to create tailored image overlays.

The above is the detailed content of How to Create a Dark Overlay Effect with Text and Icons on Image Hover Using CSS?. For more information, please follow other related articles on the PHP Chinese website!