Streaming live at 10am (PST)

Want to blur div block above hero image


#1

Hi there,

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.

Any help or advice would be greatly appreciated.

Thanks!



#2

Hello @maxlab

Something like this?


#3

Hi @aaronocampo,

very nice and how you did it?


#4

Hi @Maurice

I’m posting a video with all the steps in a few moments.


#5

Here it is:


#6

@aaronocampo – Wow, thank you. Total lifesaver.

Any suggestions on how to fix the blur that spills over the top and bottom of the Blurred Div?

Thank you again!


#7

I’m glad I could help. :smile:

For the bleeding of the blur effect just make your div element containing the blured image overflow ‘hidden’, like this:

Let me know if that helps.


#8

Great solution @aaronocampo :blush:

If you want to get rid of the smudge border, you can follow the below screenshots.

Take the “Div Blurred” and give it a width & height of 104%. Also you must give them top: -2% and left: -2%, so its remains in the center.

And then the smudgy border is gone :blush:


#9

Thank you for taking the time! Hugely appreciate it.