Magnifying Glass for Text and more!

After discovering the backdrop-filter property - specifically "blur()" function - I thought it would be cool if there was also a "scale()" option.

Unfortunately, I couldn't find anything of the sort. The closest thing I could find to scaling the element behind another element was this W3 tutorial.

But what about text?

And thus the magnifying glass was born:

Open issues:

• Magic numbers - spent a while trying to math it, but still haven't arrived at the formula that works well for different sizes and scales.
• linear-gradient of the lens doesn't show above images.

Although this is mostly just for fun, I think this has some real use cases for those who are hard of seeing - there is something to be said for magnification in context (and not just making the entire page bigger).

Maybe a browser extension?

Cheers