Applying zoom at an image using pure CSS- fast and easy

In this article we will learn how to apply a zoom at an image using pure CSS, without applying any JavaScript or any lib, let’s get straight to the point hitting the goal applying pure CSS.

The main idea of the technique is to add an external div that will cover the image, and when running the mouse pointer, it will activate the zoom.

The HTML of this project is pretty simple, just a <div> with an <img> tag

The zoom technique is performed by the CSS scale property

As an example, a very common use is on e-commerce product screens, where the customer needs to see more details of the product and then zoom in

Zoom along with CSS: HTML code

As mentioned above, the HTML code is very simple, check it out:

<div class="container">
 <img src="garrafa_zoom.jpg">
</div>

n this case, we have a <div> with a <class container> that will host the image

There is also the target image inside that <div>, which I called bottle_zoom.jpg and it is in the same folder as the HTML

Now let’s go to the CSS code

Zoom along with CSS: CSS code

Let’s set a size for the container, add a margin to split off the browser’s borders and also a border to mark the end of the <div>.

In the image we will define that its width is 100% of the source image, that is, the image will be the size of the container

Also let’s add a transition for the zoom to not apply suddenly.

And finally let’s add the pseudo-selector :hover, so when the mouse pointer is over the image, it will activate the scale

This scale will enlarge the image, based on the value of the rule

See the final CSS code:

.container {
 position: relative;
 border: 1px solid #000;
 overflow: hidden;
 width: 400px;
 margin: 100px;
}

.container img {
 max-width: 100%;
 -moz-transition: all 0.5s;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}

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

Also note that we added -moz- and -webkit-, this is to use the browsers’ native functionality for the scale rule, for example

-moz- does this function for Firefox browser and -webkit- for Safari and Opera

Sometimes some rules are not standardized in browsers yet, but the native functions are, so applying this feature you will solve this problem

Given the explanations, let’s see the final result