In this article, we will demonstrate how you can add a zoom effect to an image when we hover over it. You might probably have seen this effect in modern blogs’ post thumbnails.
The main purpose of adding this zoom effect is to grab the user’s attention to a specific element on the page.
Hover over the below image to see the zoom effect ?:
In this article, we are going to learn an easy method that we can use to zoom in or zoom out an image on mouse hover using CSS.
The basic idea to create a zoom effect is to simply scale up the image whenever we mouse over it. This, we can very easily achieve with the help of the transform property.
The transform property accepts a function scale() that lets us scale up or down elements in 2D space.
To zoom in the image with the scale() function, use a value higher than 1 and to zoom out, use a value lower than 1.
In the following example, we have used transform: scale(1.3). This will zoom in the image up to 30%.
Example:
div{
width: 250px;
height: 250px;
border: 3px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
div img{
width: 100%;
transition: 0.5s ease;
}
div img:hover{
transform: scale(1.3); /* zoom in the image upto 30% */
cursor: pointer;
}
Rotate and Zoom an Image on Mouse Hover using CSS
You can make the hover effect more attractive by adding a rotation with the zoom effect.
Just like the zoom in and zoom out, we can also rotate images with the transform property. To do that we have to take help of the rotate() function which can rotate HTML elements both in 2D as well as in 3D space.
In the following example we have combined both the rotation as well as the zoom-in effect on image hover:
Example:
div{
width: 250px;
height: 250px;
border: 3px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
div img{
max-width: 100%;
transition: 0.5s ease;
}
div img:hover{
transform: scale(1.4) rotate(20deg); /* combine rotation & zoom in effect */
cursor: pointer;
}
