I’m looking to achieve a background blur effect in a div block on my hero element, so that thin text will remain legible while over a background hero image. The effect I’m looking to achieve is something like this: (created in Adobe XD)
Compared to what I have now, which is just a dark opacity “wash”: read-only link
I’ve read a few potential workarounds, but they involve using a blurred version of the hero (created in photoshop) superimposed on the “clear” version – which in my mind would cause problems when the window is resized horizontally. i.e., it needs to work dynamically as a filter over the hero. I imagine there’s a piece of custom CSS that would remedy this, but I’m having trouble finding it.
