Zoom In and Zoom Out image on hover in CSS

Nils 0 Comments
Many people are searching for animations in web designing. So, I have try to make very simple tutorial on Image zoom in and Zoom out effect. The image zoom effect is used to apply zoom over an image on mouse hover or click.

This type of effect is mostly used in portfolio sites, and product sites. I hope this small tutorial will help you to create awesome zoom effect to your webpage.

Zoom In and Zoom Out image on hover in CSS


In this tutorial, we will see how to zoom In and Zoom out image on hover using CSS. This tutorial contains two sections of code part. The first section contains the HTML code and the second is CSS code. 
: hover is state in CSS when our mouse cursor is over the element.

There are many ways we can add multiple special effects, transitions and animations to our webpages and one of them is very major adding a Zoom Effect on Images when user hovers over them. We can easily apply zoom effect on image by applying CSS scale transform property. You might have also seen this effect on many modern sites.

Lets see the preview first.

Zoom in preview:

Zoom out preview:

Let's start coding
HTML  
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Zoom In-Zoom Out </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container zoom-in">
        <img src="img1.jpg">
    </div>

    <div class="container zoom-out">
        <img src="img1.jpg">
    </div>
</body>

</html>




CSS  
body {
    margin: 0;
    padding: 0;
    background-color: #eeeff4;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 300px;
    height: 180px;
    padding: 15px;
    margin: 15px;
}

.container img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    box-shadow: 5px 8px 12px rgb(0 0 0 / 30%);
}

/*Code for zoom in effect*/
.zoom-in img:hover {
    transform: scale(1.3);
    transition: 0.3s ease;
    cursor: pointer;
}

/*Code for zoom in effect*/
.zoom-out img:hover {
    transform: scale(0.7);
    transition: 0.3s ease;
    cursor: pointer;
}

Note: If the zoom image is too large, it will go outside of the viewport.

Conclusion : 

That’s it! Now we can easily apply zoom in and zoom out effect on any component. If you have any doubts this tutorial, then comment down below.
Tags

Post a Comment

Post a Comment

Previous Post Next Post