Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create image overlay hover effect with CSS?

CSS Web Development Front End Technology

The image overlay effect on hover is hidden when the page loads and becomes visible when the mouse cursor is hovered over the image. The smooth transition effect is achieved using the CSS transition property combined with opacity and position properties.

Syntax

.overlay {
    transition: duration ease;
    opacity: 0;
    position: absolute;
}

.container:hover .overlay {
    opacity: 1;
}

Method 1: Basic Overlay with Text

This method creates a simple text overlay that appears centered over the image on hover −

<!DOCTYPE html>
<html>
<head>
<style>
    .card-container {
        display: inline-block;
        position: relative;
        width: 300px;
        margin: 20px;
    }
    
    img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
        transition: 0.5s ease;
    }
    
    .hoverText {
        transition: 0.5s ease;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    
    .card-container:hover img {
        opacity: 0.3;
    }
    
    .card-container:hover .hoverText {
        opacity: 1;
    }
    
    .caption {
        background-color: #1a365d;
        color: white;
        font-size: 24px;
        padding: 15px 25px;
        border-radius: 8px;
        font-family: Arial, sans-serif;
        font-weight: bold;
    }
</style>
</head>
<body>
    <div class="card-container">
        <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=300&h=200&fit=crop" alt="Forest">
        <div class="hoverText">
            <div class="caption">Beautiful Forest</div>
        </div>
    </div>
</body>
</html>

A forest image appears. When you hover over it, the image dims and a blue rounded caption "Beautiful Forest" appears in the center with smooth animation.

Method 2: Full Overlay Background

This method creates a colored overlay that covers the entire image −

<!DOCTYPE html>
<html>
<head>
<style>
    .image-overlay {
        position: relative;
        width: 300px;
        height: 200px;
        overflow: hidden;
        margin: 20px;
    }
    
    .image-overlay img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: 0.3s ease;
        background-color: rgba(0, 123, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .image-overlay:hover .overlay {
        opacity: 1;
    }
    
    .image-overlay:hover img {
        transform: scale(1.1);
    }
    
    .overlay-text {
        color: white;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
</style>
</head>
<body>
    <div class="image-overlay">
        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop" alt="Mountain">
        <div class="overlay">
            <div class="overlay-text">Explore Nature</div>
        </div>
    </div>
</body>
</html>

A mountain image appears. On hover, a blue semi-transparent overlay covers the entire image with white text "Explore Nature" in the center, and the image slightly zooms in.

Key Points

  • Use position: relative on the container and position: absolute on the overlay
  • Set initial opacity: 0 on overlay and opacity: 1 on hover
  • Add transition property for smooth animation effects
  • Use transform: translate(-50%, -50%) for perfect centering

Conclusion

Image overlay hover effects enhance user interaction by revealing additional content smoothly. The key is combining CSS positioning, opacity transitions, and hover pseudo-selectors to create engaging visual experiences.

Updated on: 2026-03-15T14:24:50+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements