How to Make an Image Zoom in HTML

Learn how to make an image Zoom in HTML with few simple and easy steps. We will use CSS properties such as rotation, scaling, transitions, and transformation.

There are many ways to create a special effect and one of them is making Zoom in & out on hover with the help of HTML and CSS.

Furthermore, you can also apply the additional effect on Zooming image which includes the Zoom image within the container or without a container.

By adding the zoom within the container, the image will stay in the container and zoom out the image itself. But if we want the image itself to zoom out then we need to keep it outside the container.

Today, we will take a look both ways to create the Zoom effect.

How to Make an Image Zoom in HTML

To create hover zoom in CSS is very easy and straightforward. All you need to know a few of CSS3 properties and you are good to go.

Let’s start with the zoom within the container markup. We have .zoom-within-container as the container wrapping our img.

<div class="zoom-within-container">
      <img src="img/zoom.jpg" alt="zoom">
</div>

Similar, we will create the markup for hover zoom without a container. We have .zoom-without-container as the container wrapping our img.

<div class="zoom-without-container">
    <img src="image/zoom.jpg" alt="zoom">
</div>

The CSS Style for Zoom

Now we will apply the style to make work the effect. To zoom the image within the container can be done by using the overflow property hidden to avoids the image flowing outside on transformation.

To get the smooth hover effect on the transformation of an image, we will use the transition property. Finally, we will use the scale transform on hover the image event and it will do the zoom part.

/* Within Container */
.zoom-within-container {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}
.zoom-within-container img {
  transition: transform .5s ease;
}
.zoom-within-container:hover img {
  transform: scale(1.5);
}

Now the second part to create the zoom effect without a container. This will zoom out the image it self without caring about the container.

In this case, we will use the transition property for container instead of an image. For image, we will make it’s width 100% and height auto so it will auto resize within the container.

Lastly, we will apply the transform scale which will make the image large on hover and will go outside of the viewport.

/* Without Container */
.zoom-without-container {
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}
.zoom-without-container img{
	width:100%;
	height:auto;	
}
.zoom-without-container:hover {
  transform: scale(1.5); 
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

This is how you can easily zoom the image on hover. It’s just a basic way but if it’s not enough for you then you can check out below advance premade recipes which you simply need to apply to get additional effects.

Quick-zoom Container

/* Quick-zoom Container */
.quick-img-zoom img {
  transform-origin: 0 0;
  transition: transform .25s, visibility .25s ease-in;
}
/* The Transformation */
.quick-img-zoom:hover img {
  transform: scale(2);
}

Point-zoom

/* Point-zoom Container */
.point-img-zoom img {
  transform-origin: 65% 75%;
  transition: transform 1s, filter .5s ease-out;
}
/* The Transformation */
.point-img-zoom:hover img {
  transform: scale(5);
}

Zoom-n-rotate

/* Zoom-n-rotate Container */
.zoom-n-rotate img {
  transition: transform .5s ease-in-out;
}

/* The Transformation */
.zoom-n-rotate:hover img {
  transform: scale(2) rotate(25deg);
}

Zoom in slow-motion

/* Slow-motion Zoom Container */
.slowmo-img img {
  transform-origin: 50% 65%;
  transition: transform 5s, filter 3s ease-in-out;
  filter: brightness(150%);
}

/* The Transformation */
.slowmo-img:hover img {
  filter: brightness(100%);
  transform: scale(3);
}

Brighten and Zoom-in

/* Brightness-zoom Container */
.brightness-img img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(50%);
}

/* The Transformation */
.brightness-img:hover img {
  filter: brightness(100%);
  transform: scale(1.3);
}

You can play with both transform and transition properties to bring more awesome effects.