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)
This is really cool!
awesome, thanks :-)