DEV Community

Cover image for Magnifying Glass for Text and more!
eitanwaxman
eitanwaxman

Posted on

15 2

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

Top comments (3)

Collapse
 
vulcanwm profile image
Medea โ€ข

This is really cool!

Collapse
 
artydev profile image
artydev โ€ข

awesome, thanks :-)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay