Pure CSS Image Zoom In & Out Effect on Hover

It’s time to show you some more pure CSS Image Zoom In & Out Effect on hover. These are a bit more classy and developed using CSS3 scale and transition property.

Last time we did experiment with smooth on-hover Zoom Image effect with a pure CSS transition. Now we will come with another set of animation for zoom property.

We will create two Zoom-out effects for image. The first one work within the container div and when user mouse over the image, it will zoom out the image within the container element.

The second one will work without container and when the user points the mouse over the image, The Image himself will enlarge without distributing the layout.

Similar, We will also create two Image Zoom-in effect but both work within the container. Just the difference is little animation style. Both work similar way but the first one will zoom-in image a little bit whereas the second will create more depth.

There are many different ways to develop Zooming effects for images with the help of the only CSS. We can use the CSS3 properties like Scale, Zoom, and Transition.

You can also produce such effect by using jquery with more features. I am planning to come up with something for jquery.

But for now, I have pure CSS zoom effects for you. I will guide you on how to make them by using simple and easy code implementation.

We will look at both Scale and transition property to create zoom image effects for images. To make sure when we zoom the image, It should retain their original size but I have developed one Zoom effect that changes the size when hover.

How to Create Pure CSS Image Zoom In & Out Effect on Hover

The first effect keeps the image size according to the div container and only zoom the image its self. Let’s have a look the first effect, and it’s HTML is just a div with image place inside that div.

<div class="zoomEffect_1">
   <img src="img/photo1.jpg" alt="photo" width="550" height="367">
</div>

The CSS is also isn’t quite hard. We need to add position: relative; and need to add overflow hidden so the image should not go outside the div.

.zoomEffect_1 {
  position: relative;
  overflow: hidden;
}

Next, We set the image to 100% of the width and height will be auto. Here we will use transition that speed value is 0.5 second. Finally, We will scale the image on hover that CSS property allows us to zoom the image.

.zoomEffect_1 img {
  max-width: 100%;
  height:auto;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.zoomEffect_1:hover img {
  -moz-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

Zoom Out Entire Image Example

The second effect is zooming the entire div and zoom out the complete image. We keep the HTML is simple just like above one.

<div class="zoomEffect_2">
   <img src="img/photo2.jpg" alt="photo" width="550" height="367">
</div>

The main div class name  .zoomEffect_2 needs to set its position relative. Keep in mind that we used to transition and scale both here.

.zoomEffect_2{
    display:inline-block;
    border:0;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   
}

We do same on hover but we will change the values of transition and Scale.

.zoomEffect_2:hover{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.2);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.2);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.2);
    transition: all 200ms ease-in;
    transform: scale(1.2);
}

These are two effects I have to explain here but in demo and download source you will find all four zoom effects.

If you want older browser compatibility than you can use jquery but CSS3 is more popular nowadays. It supports all modern browsers.

You May Also Like

Leave a Comment