Zoom images inside the container on mouse over using CSS

Zooming in on an image is a functional and appreciated effect to have available. This functionality can be implemented in various ways, including through pure CSS, pure JavaScript or through jQuery. Out of these options, the pure CSS solution is the fastest as the other 2 ways require the execution of a set of code blocks, which involves DOM traversal and is an expensive process. Luckily for us, CSS3 provides a simple and efficient solution just by tweaking some CSS3 properties!
CSS3 has a transform property which allows you to translate, rotate, scale, and skew elements. This pure CSS solution will zoom an image inside the container on mouse over.

HTML Markup

First, let’s take a look at the HTML. The HTML markup has an image wrapped inside a container and item div element. The container is the parent element and the item is the child element, which holds the image. The item div element is required to define an absolute position for the image inside the container. The images used in this post are taken from Free Images.

CSS

As the image will be scaled to create a zoom effect inside the container, the .container CSS class will define the size of the image. In our case, the size is 480×320 pixels. It is also important to define the overflow property as ‘hidden’ as it will clip the image to its original width and height.

.container {
 position: relative;
 width: 480px;
 height: 320px;
 overflow: hidden;
 }

The .item CSS class is used to position the image inside the parent container. It sets the top and left position of the image inside the container.

.item {
 position: absolute;
 top: 0;
 left: 0;
 }

Next, attach a hover event CSS class to the container, which uses the transform CSS3 property to scale the image to 120%. One of the values of the transform property is scale(). This function allows you to scale an element up or down, which in turn makes the element appear bigger or smaller. If the value provided is greater than one, the element is scaled up.

.container:hover .item img {
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
 }

Finally, add a transition effect when scaling the image. CSS3 transitions allow you to change property values smoothly, over a given duration. The following CSS code will add a transition duration of 0.6s for zoom animation to complete.

.item img {
 -webkit-transition: 0.6s ease;
 transition: 0.6s ease;
 }

The complete CSS code is,

.container {
 position: relative;
 width: 480px;
 height: 320px;
 overflow: hidden;
 }
 .item {
 position: absolute;
 top: 0;
 left: 0;
 }
 .item img {
 -webkit-transition: 0.6s ease;
 transition: 0.6s ease;
 }
 .container:hover .item img {
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
 }

You can check out this demo to see the code in action!

Conclusion

To sum it up, this tutorial examined the process of implementing a zoom effect on images, triggered by mouse over, using pure CSS. This solution zooms an image inside the container with transition effect. Remember, you can change the scaling value and transition duration as per your need. Have fun!