Smooth Zoom Transition Using CSS

Smooth Zoom Transition Using CSS (Free Code)

Smooth Zoom Transition Using CSS

This tutorial will help you to create smooth zoom transition CSS. Earlier I shared tutorials on different types of image zoom. 

In this article, you will learn how to make SMOOTH Image Zoom on Hover Effects. Many types of zoom effects are used in images. However, the smoother the effect, the more interesting the hover effect.

Here is the zoom effect I used in the image which was created only by CSS. Here I have used an image. When you hover the mouse over the image, the image will rotate at a 5-degree angle and zoom slightly.

Smooth Zoom Transition CSS

Below I have given a demo that will help you to know how Smooth Zoom Transition CSS works. Below you will find the required source code and live preview.

See the Pen
Image Hover Effect by Foolish Developer (@foolishdevweb)
on CodePen.

I have used an image on the webpage as you saw above. I used a shadow around this image to make the image brighter. The image will zoom in when you hover the mouse over the image. This zoom will be very smooth. With this, the image will turn a bit.

HTML code of Smooth Zoom

I used very little HTML and CSS to create Smooth Zoom Transition. If you know the basics of HTML CSS then you can easily understand.

Below I have given the HTML code that is needed to create this project. I have used only one image here.

<div class=”container”>
  
  <img src=”https://images.pexels.com/photos/569169/pexels-photo-569169.jpeg?w=940&h=650&auto=compress&cs=tinysrgb” alt=”image”>
  
</div>

CSS of Smooth Zoom Transition

Now is the time to design and implement this Smooth Zoom Transition using CSS. Image width: 400px, height: 300px is used here. With this, shadows have been used around the image.

I used the transition to make Smooth Zoom work. Here it will take 0.5 seconds for the image to zoom. As I said before, when the image is zoomed in, the image will rotate a bit. For this, I have added rotate (-5deg) using Transform.

.container{
/*  add width and height to the container  */
  width:400px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 50px;
  transform: translate(-50%,-50%);
  overflow: hidden;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ccc;
}
/* Let’s style our image */
img{
  width: 400px;
  height: 300px;
/*  add a transition to the container  */
  transition: all .5s ease-in-out;
}
/* Hover Effect */
.container:hover img{
/*  scale will increase the width and height of the image  */
/*  ‘rotate’ will rotate your image   */
  transform: scale(1.2) rotate(-5deg);
}

I hope you have been able to create this Smooth Zoom Transition CSS using the above codes. If there is any problem then you can definitely let me know by commenting.