Zoom Effect on Image Hover with CSS

There are many ways you can add a little spice to your web design projects and one of them is adding a Zoom Effect on Images when user hovers over them. In this post I will share a simple way we can add zoom effect on Image hover with CSS.

View Demo of zoom effect on images.

HTML for images with zoom hover effect

Applying a zoom effect is easily done by applying a scale transform using CSS, however in order to ensure that when zoom happens, the images retain their original size, that is any extra height & width gets clipped, we are going to wrap our images into few containers as shown below.

 
<div class="zoom-effect-container">
  <div class="image-card">
      <img src="https://superdevresources.com/wp-content/uploads/2014/12/lions.jpg"/>
  </div>
</div>
<div class="zoom-effect-container">
  <div class="image-card">
      <img src="http://superdevresources.com/images/pixabay/peacock.jpg"/>
  </div>
</div>

As we can see, I have wrapped the images on which I want to apply zoom effect into wrapper classes called zoom-effect-container and image-card. Next we will define CSS styles for these wrapper classes as well as for the image contained in them.

CSS for images with zoom hover effect

For the parent container class zoom-effect-container, we are going to define the size we want it to retain while displaying and zooming the images within it. This generally would be same as the size of images. For my case it is 640px X 360px. We also define overflow: hidden for this parent container, this is crucial if you want to clip the image to its original height & width when zoom effect is applied.

.zoom-effect-container {
    float: left;
    position: relative;
    width: 640px;
    height: 360px;
    margin: 0 auto;
    overflow: hidden;
}

.image-card {
  position: absolute;
  top: 0;
  left: 0;
}

.image-card img {
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}

.zoom-effect-container:hover .image-card img {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}

The inner wrappaer class called image-card is used to absolutely position our image inside the parent container. Next we have defined a transition duration of 0.4s for the zoom animation to play.

The actual zoom effect is being applied on the CSS :hover selector of parent container, and we have used a scale transform which is going to zoom the image to increase its size by 8%.

Full Demo of Zoom effect on Images

Now that everything is in place, let’s see how the final demo looks like. You can view the Final Demo by clicking the button below. Also find the entire code of this zoom effect on codepen.

View Demo View Full Code

Please note that you are free to use the code presented here in your own projects. In case you are wondering about the Images used in the Demo of Zoom effects, they are taken from Pixabay and are licensed CC0 and are free for commercial use too. You can find more such free to use images which are free for commercial use too.

Kanishk Kunal

Kanishk is a Software Engineer turned Online Entrepreneur who has created many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal

This Post Has 8 Comments

  1. Hello Kanishk. First of all thanks for this tutorial, I was looking for this one.
    But, can you please tell me how to this continuous zooming effect like this (check the link)

    https://www.pottermore.com/explore-the-story

    1. Hi Sanket!
      To get the zooming effect as seen in the link you provided, try changing the transition duration from 0.4s to 4s.

      .image-card img {
      -webkit-transition: 4s ease;
      transition: 4s ease;
      }

      1. Yes its working. Thanks a lot Kanishk for your help.

  2. Hi Kanishk, to responsive teplates I use width: 100% if column/div size is set.
    Works fine.
    thanks

  3. Thanks a lot Kanishk for your help

  4. thanks its really helpful for me.

  5. Just so you know….
    Zoom on hover is one of the more annoying effects – esp when it is unexpected.

    I have stopped visiting one site precisely because of this slight zoom on hover.
    Worse – when scrolling down, there seems to be no part of the screen that can avoid this annoyance.

    Please think whether this effect is to confirm the designer’s technical knowhow – or to a “enhance”(??) the UX ?

  6. Hi,

    Great tutorial.

    Just a question: How would you allow for scrolling around the image once it is zoomed?

Leave a Reply

Close Menu