how to zoom image on hover using CSS

In this article, we will learn how to zoom an image while we hover over it. I have learned this from the internet, so now I would like to share the way I learned let’s start with writing some HTML markup,
Note: if you are here only for the code then a copiable code is provided at the end of an article.

HTML :

we will start with creating a parent div named container with its child img-container in which we will have our image, HTML is over now let’s jump to the CSS,

CSS :

Let’s start with giving width and height to the parent container which will define what the size of our image will be,

Now set the width and height of an img-container to 100% so we will have the size of its parent container, let’s give one image to the img-container using the background property and edit its position and size using the background property, the output of the code is given below,

as we can see in the video that the image is getting overflowed and to remove that we are gonna use the overflow hidden property to the parent container which will make our output look like this,

zoom

here we have created the image zoom effect using CSS which can also be used as background, so that is it for this article thank you for reading, and keep reading my articles.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>challenge</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html{
            font-size: 62.5%;
        }
        body{
            height: 100vh;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container{
            width: 30rem;
            height: 25rem;
            border: 2px solid black;
            border-radius: 1.4rem;
            position: relative;
            overflow: hidden;
        }

        .img-container{
            height: 100%;
            width: 100%;
            position: relative;
            background:linear-gradient(180deg, rgba(6, 6, 6, 0.15), rgba(0, 0, 0, 0.474)), url(https://images.unsplash.com/photo-1636572481914-a07d36917486?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80) no-repeat center center/cover;
            opacity: .8;
            transition: all .5s;
        }
        .img-container:hover{
            transform: scale(1.2);
            transition: all 1s;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="img-container"></div>
    </div>
</body>
</html>

Leave a Comment

Your email address will not be published.

Scroll to Top