Learn How to Create an Image Overlay Zoom Effect on Hover with HTML and CSS

Solution with Code:

Here’s a solution demonstrating how to create an image overlay zoom effect on hover using only HTML and CSS.

1. HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="title" content="Learn How to Create an Image Overlay Zoom Effect on Hover with HTML and CSS">
    <meta name="description" content="Master the art of creating a zoom effect with image overlays. This tutorial shows you how to create a smooth zoom effect on an image when hovered using only HTML and CSS.">
    <meta name="keywords" content="Image Overlay Zoom Effect, Image Hover Effect, Zoom Effect on Hover, CSS Animations, Hover Zoom, CSS Effects, Image Effects, Web Design, HTML and CSS, Interactive Image Effects">
    <title>Image Overlay Zoom Effect on Hover</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h2>Image Overlay Zoom Effect on Hover</h2>
    <p>Hover over the image to see the zoom effect with an overlay.</p>

    <div class="container">
        <img src="img_avatar.png" alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">Zoomed In!</div>
        </div>
    </div>

</body>
</html>

2. CSS (styles.css):

/* Reset default margin and padding */
body, h2, p {
    margin: 0;
    padding: 0;
}

/* Styling the heading */
h2 {
    text-align: center;
    margin-top: 20px;
    font-size: 24px;
}

p {
    text-align: center;
    margin-bottom: 20px;
}

/* Container for the image */
.container {
    position: relative;
    width: 50%; /* Adjust the container size */
    margin: auto;
    overflow: hidden; /* Ensures the image does not overflow */
    border-radius: 10px; /* Optional: rounded corners */
}

/* The image itself */
.image {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease; /* Smooth transition for zoom effect */
}

/* Overlay effect */
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Text inside the overlay */
.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Hover effects */
.container:hover .image {
    transform: scale(1.2); /* Zoom in the image */
}

.container:hover .overlay {
    opacity: 1; /* Show the overlay */
}

Explanation:

1. HTML Structure (index.html):

The .container div is used to wrap the image (img) and the overlay (.overlay).
The image is inside the .container, and the .overlay div is used to create the overlay effect when hovered.
The text inside the .overlay (Zoomed In!) is positioned in the center of the image using absolute positioning.

2. CSS (styles.css):

Container (.container):
- The .container is set to position: relative; so that the .overlay can be positioned absolutely inside it.
- The overflow: hidden; ensures that when the image is zoomed in, it doesn’t overflow beyond the container’s borders.
- border-radius: 10px; is optional and gives the container rounded corners for aesthetic purposes.
Image (.image):
- The image is displayed as a block element, taking up 100% of the width of the container while maintaining the aspect ratio (height: auto;).
- The transition: transform 0.5s ease; ensures the zoom effect is smooth and lasts 0.5 seconds.
Overlay (.overlay):
- The .overlay is positioned absolutely inside the container, covering the entire image.
- Initially, the overlay has opacity: 0; making it invisible.
- The background of the .overlay is set to a semi-transparent black (rgba(0, 0, 0, 0.5)).
- The transition: opacity 0.5s ease; ensures the overlay fades in smoothly when hovered.
Text Inside the Overlay (.text):
- The text is absolutely positioned in the center of the overlay using top: 50%; left: 50%; combined with transform: translate(-50%, -50%); to ensure it is perfectly centered.
Hover Effect:
- On hovering over the .container, two things happen:
  - The .image zooms in by transform: scale(1.2);, enlarging it by 20%.
  - The .overlay fades in with opacity: 1;, revealing the text.

3. Result:

Initially, the image is displayed normally with no overlay visible.
When the user hovers over the .container, the image zooms in smoothly, and the overlay fades in from the background, displaying the centered text “Zoomed In!” on top of the image.

Learn How to Create an Image Overlay Zoom Effect on Hover with HTML and CSS

Solution with Code:

1. HTML (index.html):

2. CSS (styles.css):

Explanation:

1. HTML Structure (index.html):

2. CSS (styles.css):

3. Result:

Leave a Reply Cancel reply