How to keep a photo sharp when zooming in/out?

Question

css

So it goes.
There is a page where round photographs are scattered.
When hovering, they increase, when clicked, they quickly decrease and disappear.
The click is fast and it is difficult to catch anything in terms of quality.
But what about magnification? I've scaled it up using transform: scale()
I'm taking a larger photo so that it's sharper when zoomed in. Then in a static position the photo is blurry - how to fix it?
Can use other magnification methods, but which ones?
PS: the photos themselves are in high quality - 2x size for retina displays

Answer 1

In general, I solved the problem like this: take a larger image in size and use transform to change the size in increments of 0.2 - so the quality is not lost
. Thus, I simply cut the pictures with a size of 1.2 relative to the desired one, and simply wrote in the styles transform: scale(0.8), and when enlarged transform: scale(1)- there is no quality loss.
Or you can simply take twice the size of the image for the retina and also increase / decrease in 0.2 steps

Answer 2

Make the views small and when hovering with a script, slip a large one.

Answer 3

Correct option with two images! one is a miniature, the other is original!
For example, in my projects I always use the on-the-fly thumbnail generation script: phpthumb.sourceforge.net
It turns out, in fact, having one link to the image, we get an additional, lower weight and dimension