Enhance your website: Create a smooth Image zoom effect with CSS

Introduction

Creating aesthetic visual effects in web design is important for capturing users' attention and adding interactivity to websites. Image zoom animation enhances user experience by providing a smooth zoom in and out effect on images. In this article, we will go through a step-by-step process on how you can create this cool hover effect in your web projects. Here’s a demo of what we’re going to make:

The Html

We have a div with the class .images. Inside the div, there are images with the class .img.

<div class="images">
      <img src="cat1.jpg" alt="" class="img" />
      <img src="cat2.jpg" alt="" class="img" />
      <img src="cat3.jpg" alt="" class="img" />
      <img src="cat4.jpg" alt="" class="img" />
      <img src="cat5.jpg" alt="" class="img" />
      <img src="cat6.jpg" alt="" class="img" />
      <img src="cat7.jpg" alt="" class="img" />
    </div>

CSS

Let’s add some basic styles to the images.

.images {
  max-width: 800px;
  margin: 100px auto;
}
:root {
  --img-size: 70px;
}


.img {
  width: var(--img-size);
  height: var(--img-size);
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
 }

we defined a variable --img-size, set it to 70px, and used it as the width and height of our images.

output

Creating the grid

We want the images to overlap. One way to do this is to make the grid columns half the size of the images. In the :root, define a variable for the grid column size and set it to half of the –-image-size variable using the calc() function.

:root {
  --img-size: 70px;
  --column-size: calc(var(--img-size) / 2);
}

Remember the –-img-size is 70px. So this --column-size will be 70px divided by 2, that is 35px. We’ll display .images grid and then use this --column-size variable as the size of our grid-template-columns.

.images {
  display: grid;
  grid-template-columns: repeat(7, var(--column-size));
  transition: grid-template-columns 0.5s;
}

I set the column count to 7 because we have 7 images. The next step is to animate the grid columns.

Animating the grid-template-columns

We want the grid columns to expand when we hover over the grid container (not the image). This will make the images spread out and not overlap. To do this, we’ll increase the column size on hover.

.images:hover {
  --column-size: calc(var(--img-size) * 1.5);
}

Remember, the --image-size variable is 70px. So now, we’re saying the --column-size should increase to 105px on hover, which is 70px multiplied by 1.5. The --column-size is originally 35px. When you hover over the container, the –column-size will go from 35px to 105px, spreading out the images.
The fun part is that we can transition the grid-template-columns to have a smooth animation. Let’s add a transition to our grid container.

.images {
  transition: grid-template-columns 0.5s;
}

Scaling the images on hover

To create the zoom effect on the images, we’ll use the transform:scale() to scale the images.

.img:hover {
  scale: 2;
  }

Scale:2 will make each image double its original size when you hover it. Let’s add a transition to the images for a smooth animation.

.img {
    transition: scale 0.5s;
}

Scaling the siblings.

If you check the demo at the beginning of this article, you’ll notice that when an image is hovered, the image before and after it also slightly increases in size. We’ll use the sibling selector(+) and the :has selector to achieve this effect.
The sibling selector(+) is used to select the immediate sibling of an element. We’ll select the immediate sibling of any image being hovered over.

.img:hover + .img{
  scale: 1.5;
}

This will scale the image that comes immediately after any image you’re hovering over. How do we select the image coming before? We’ll use the :hasselector for this.

.img:has(+ .img:hover) {
  scale: 1.5;
}

This means that if any of the images has a sibling directly after it that is being hovered, scale that image to 1.5 times its original size.
Great! Everything is working perfectly now. When you hover over any image, the two images next to it will also scale up a bit. The only thing left to do now is to ensure that the image we’re hovering always appears on top of its siblings. Let’s set a higher z-index for the hovered image to make it appear on top.

.img:hover {
  scale: 2;
  z-index: 2;
}

Conclusion

And that’s it. We’ve successfully created this fancy zoom animation with only CSS.
We used transitions, transform, sibling selector, :has selector, and z-index to create an interesting effect where hovering over one image triggers a scaling effect on its siblings. This method shows how CSS can be used to make websites more interactive.