Smooth Background Image Zoom Using CSS (Free Code)

In this article, you will learn how to zoom Background Images using HTML and CSS. Nowadays different types of smooth zoom effects are added to the image. Most Background Image Zoom is created by CSS only.

So here I will show you how to zoom the image using CSS. The CSS zoom effect is basically of two types, one zoom-in, and the other zoom out. I will show you two types of designs here. So here you will know how to add zoom in and zoom out in the image.

Smooth Background Image Zoom CSS

From this tutorial, you can easily learn how to add Background Image Zoom to any image. Earlier I shared various designs of Advanced Image Zoom and Image Magnifying Glass. But those projects were created by JavaScript, JQuery, or various external libraries.

 Method - 1 

CSS Smooth Image Zoom In

This is a CSS zoom-in design that will zoom your image. This is basically a hover background image zoom. As a result, this image will zoom in when you hover over the image.

Demo Download

You can set the amount or value of this zoom to your liking. I have shown this type of image zoom-in effect created by JavaScript before. That design is more perfect and advanced. Transform: scale () is used to zoom images with CSS.

Using the below HTML, I have added the basic information of this smooth image zoom-in design. I have added the image used here in CSS.

<div class="image zoom-in">

   <span>Zoom in</span>

</div>

The following CSS has designed the information required for this image zoom-in. First, the webpage is designed and then the width and height of the image are determined.

Transform: scale (1.35) is used to zoom the image. In general, the value of this scale is 1. You can increase its value as needed.

 body{

     background: rgb(228, 243, 248);

     color: #fff;

     font-size: 16px;

     font-family: sans-serif;

 }

.image {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 430px;

  height: 250px;

  margin: 2vw;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  overflow: hidden;

  background-image: url("https://www.teahub.io/photos/full/247-2478341_hd-pics-photos-cartoon-movie-characters-2-desktop.jpg");

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  border: 5px solid rgb(183, 185, 186);

}

.image span {

  position: relative;

  z-index: 1;

}

.zoom-in::after{

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: inherit;

  background-size: cover;

  transform-origin: center;

  transition: transform 0.4s ease-in-out;

}

.zoom-in:focus::after, .zoom-in:hover::after {

  transform: scale(1.35);

}

 Method - 2 

Background Image Zoom Out CSS

The following design is CSS image zoom out. When hovering over the image, the image will zoom out or return to normal. 

The code used for zoom-in and zoom-out design is almost the same. However, there is a difference in the value of transform: scale ().

Demo Download

I have created the basic structure of Background Image Zoom with the following HTML. A box has been created here and a text has been added.

<div class="image zoom-out">

   <span>Zoom out</span>

</div>

Now with CSS, I have designed Smooth Image Zoom Out. Under normal conditions, the image will be on transform: scale (1.55). 

This allows us to see the image in zoom mode. When hovering over the image, the image will zoom out.

body{

     background: rgb(228, 243, 248);

     color: #fff;

     font-size: 16px;

     font-family: sans-serif;

 }

.image {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 430px;

  height: 250px;

  margin: 2vw;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  overflow: hidden;

  background-image: url("https://www.teahub.io/photos/full/247-2478341_hd-pics-photos-cartoon-movie-characters-2-desktop.jpg");

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  border: 5px solid rgb(183, 185, 186);

}

.image span {

  position: relative;

  z-index: 1;

}

.zoom-out::after{

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: inherit;

  background-size: cover;

  transform-origin: center;

  transition: transform 0.4s ease-in-out;

}

.zoom-out::after {

  transform: scale(1.55);

}

.zoom-out:focus::after, .zoom-out:hover::after {

  transform: scale(1);

}

Hopefully, these two designs above have given you a complete idea of how to create Smooth Background Image Zoom. This method allows you to add zoom effects to any image.

As I said before, I have shared with you the method of making this type of design in an advanced way. However, in that case, some JavaScript has been used. Please comment on how you like this simple CSS image zoom.