How to Zoom an Element on Hover in CSS?

To zoom an element on hover in CSS, we can use the transform property. The transform property accepts a function scale() which takes in an absolute number as a parameter.

If this number is greater than 1, the element’s size increases. For eg, scale(1.5) will increase the element’s size by 50%, scale(1.7) by 70%, and so on.

And if this absolute number is less than 1, the element’s size decreases. For eg, scale(0.7) will reduce the element’s size by 30%, scale(0.5) by 50% and so on.

Let’s say we have a div element in our HTML document and we want to zoom this div by 10% whenever we mouse over it.

To do that we have to simply apply transform: scale(1.1); property on the div inside the :hover pseudo-class. To zoom it smoothly, we can add some transitions to it, for eg. 0.5s ease or so:


   height: 200px;
   width: 200px;
   margin: 40px;
   padding: 10px;
   background: yellow;
   transition: 0.5s ease;  /* Zoom in smoothly */
   transform: scale(1.1);  /* Zoom in by 10% */

You can mouse over the below div element to zoom it by 10%:

Hover over me to zoom in


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.