Last Updated:

Smooth image magnification on hover


The whole essence of the site lies in its details, even the slightest omission will allow you to give your site a negative assessment. In today's lesson, we will consider a rather primitive effect, namely how to create a smooth magnification of images when hovering the mouse cursor, using only a pre-prepared picture, and several CSS parameters, the essence is that the image is enclosed in a flat frame, but when hovering, the picture is extended from the edging, while the shadows added by us form the effect of floating the image in the air.


This approach will be an excellent addition to the usual images on the site, which need to be highlighted a little, while giving them a minimum accent. Let's see how to implement all this.

Step 1. HTML

The markup is quite primitive, we only need to provide a link to the image:


It should be noted that the frame will automatically adapt to the picture we need.

Smoothly enlarge the image when hovering | P-QC

Step 2. CSS


The markup is also not something ingenious, everything is very simple, add a frame with shadows, while setting the default values for the image and how much it will increase: