To create a zoom effect on hover with CSS, you can take advantage of the `transform: scale()` property. This property allows you to change the size of an element.
The `:hover` pseudo-class is used to select elements when you mouse over them..
Here is a simple example:
HTML:
```
CSS:
```
.zoom img {
transition: transform .2s; /* Animation */
}
.zoom:hover img {
transform: scale(1.2); /* (150% zoom – Note: if the zoom is too large, it will go outside of the viewport) */
}
```
In this example, when the mouse hovers over the image, it will zoom in at 120% its original size. The `transition: transform .2s;` makes the zoom effect to happen in a smooth fashion.
Remember to replace “your-image-source.jpg” with the actual source of your image.
Also consider that the value you set for the scale function (here we’re using 1.2) determines how much you’re zooming in. A value of 1 stands for the original size, so 1.2 makes the image 20% larger. Play with this value to get the desired effect. Be aware though that if you set it too large, the zoomed image might go outside the viewport.
