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:
Example:
div{
height: 200px;
width: 200px;
margin: 40px;
padding: 10px;
background: yellow;
transition: 0.5s ease; /* Zoom in smoothly */
}
div:hover{
transform: scale(1.1); /* Zoom in by 10% */
}
You can mouse over the below div element to zoom it by 10%:
