CSS HTML

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

October 20, 2021

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.

zoom at an image using pure CSS cover

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

image zoom with pure css

Here the image with the basic styles and the border applied to the container

zoom at an image using pure CSS 2

Here we have the image after the :hover, applying zoom by the scale property

Zoom in image with CSS is ready!

Conclusion

In this article we’ve learned how to apply zoom at an image using pure CSS!

We just need to create a source <div>, which will control the size of the image inside the <div>.

After that, we apply the scale rule through the :hover, and we can apply a <transition> to the image to have a smoother transition on the animation.

And that’s it for today, See you next post!

See more articles about CSS clicking here

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x