Want to blur div block above hero image

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!


1 Like

Hello @maxlab

Something like this?

http://cloud.ipagroup.co/pjB8

3 Likes

Hi @aaronocampo,

very nice and how you did it?

Hi @Maurice

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

2 Likes

Here it is:

http://cloud.ipagroup.co/phbh

3 Likes

@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!

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.

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:

2 Likes

Thank you for taking the time! Hugely appreciate it.

2 Likes

oh darn the video is gone - is it possible to repost the solution please?

2 Likes

Here it is:

https://go.ipagroup.co/hka

2 Likes