How to create an Image Overlay Zoom Effect on hover using CSS ?

Image Overlay Zoom Effect on hover can be done by using CSS. This effect is used in web design for user attention to images by highlighting the content or text, and to improve the overall look of a website by adding dynamic visual effects. We have given a Zoom effect to the text and image when the user hovers over the image.

Preview

Approach

First create a HTML structure with elements like <h1>, <h3>, <div> and <img>. Link the external stylesheet for styling purposes.
Use CSS for giving smooth transition effect set the property transform 0.1s ease-in-out for the overlay.
When the element having class named “.imageContainer" is hovered, the overlay element defined with a scale transformation for creating a zoom effect.
The element .imageContainer > img defines the opacity of the image to 0.7.
Adjusts the font size of the overlay element to 30px when the screen width is less than 1392px. Defines border, and border-radius for styling to the image.

Example: Illustration to create an image overlay zoom effect on hover using CSS.

HTML

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <meta charset="UTF-8"> 

    <meta name="viewport" 

          content="width=device-width, 

                   initial-scale=1.0"> 

    <link rel="stylesheet" 

          href="style.css"> 

    <title> 

          Image Zoom Effect using CSS 

      </title> 

</head> 

<body> 

    <h1>GeeksforGeeks</h1> 

    <h3> 

        How to create an image overlay 

        zoom effect on hover using CSS 

    </h3> 

    <div class="imageContainer"> 

        <img src= 

"https://media.geeksforgeeks.org/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp" 

             alt="Image"> 

        <div class="overlayelement"> 

            Welcome to GeeksforGeeks 

        </div> 

    </div> 

</body> 

</html>

CSS

/* style.css */
.overlayelement { 

    position: absolute; 

    top: 50vh; 

    left: 35vw; 

    font-size: 40px; 

    font-weight: 700; 

    transition: transform 0.1s ease-in-out; 
} 

.imageContainer:hover>.overlayelement { 

    transform: scale(1.5); 
} 

.imageContainer:hover>img { 

    transform: scale(1.2); 
} 

.imageContainer>img { 

    opacity: 0.7
} 

.imageContainer { 

    height: 300px; 

    width: 600px; 

    align-self: center; 
} 

img { 

    height: 300px; 

    width: 600px; 

    border: 5px solid rgb(72, 33, 108); 

    border-radius: 30px; 

    transition: transform 0.1s ease-in-out; 
} 

body { 

    display: flex; 

    flex-direction: column; 

    text-align: center; 

    justify-content: center; 

    height: 100vh; 

    gap: 50px; 
} 

h1 { 

    color: rgb(20, 87, 20); 
} 

@media only screen and (max-width: 1392px) { 

    .overlayelement { 

        font-size: 30px; 

    } 
}

Output:

Article Tags :

Web Technologies

Web Templates

CSS-Questions