When utilizing the CSS scale() function along with a transition and transform on a div element that contains a high-quality background image, I noticed that the image becomes blurry when zoomed in. How can I achieve a smoother zoom effect for high-quality images in CSS using only background properties?
What alternatives exist to minimize blurriness while zooming in on high quality images with CSS? (only using background properties)
Below is an example of the CSS code that I am currently using:
.grow { transition: all 4s ease-in-out; }
.grow:hover { transform: scale(2); }