Hey Readers,

This is a fun image zooming effect. Zooming an image gives a closer look to it.  Zoom effect can be achieved with CSS too. To zoom an image, we first specify the dimensions of the original image (optional) and then give the dimensions it should attain in a zoom position. The 'transition' property helps to achieve this. The property is used differently in different browsers. The zoom time and linear is given.  The zoom image needs to have position 'absolute'.

Here is the sample code. You can make changes with different images to obtain different zooming effects.

HTML :

<a href="#">
<img class="css_zoom_image" src="https://s-media-cache-ak0.pinimg.com/564x/9b/a2/57/9ba25796112cad616be27e473ae1e149.jpg">
<img class="img-zoom" src="https://s-media-cache-ak0.pinimg.com/564x/9b/a2/57/9ba25796112cad616be27e473ae1e149.jpg">
</a>

CSS :

.css_zoom_image {
   width: 50px;
}
.img-zoom {
   position: absolute;
   width: 0px;
   -webkit-transition: width 0.3s linear 0s;
   -moz-transition: width 0.3s linear 0s;
   -ms-transition: width 0.3s linear 0s;
   -o-transition: width 0.3s linear 0s;
   transition: width 0.3s linear 0s;
   z-index: 10;
}
.css_zoom_image:hover + .img-zoom {
   width: 200px;
}

Actual image :