Need Help Creating Background Image Blur in Webflow

Hi everyone,

I’ll make this quick. How do I change a background image to a background blur image on hover? Below is an example of what I’m trying to accomplish. Thanks.

Here is my public share link: LINK
(how to access public share link)

Hey there!

  1. Click on the image and select hover

Screen Shot 2021-07-29 at 20.02.56

  1. Scroll down to Filters and select Blur and adjust it depending how you like it

  2. That’s it! Now go back to None

Screen Shot 2021-07-29 at 20.04.18

See if it works :slight_smile:

Thanks Quitos but that makes everything including any elements on the screen blurred and with a soft edge too. I just want to make the BG image blurred. Is there any other way to achieve this?

No worries!

If you use an actual image element it should only target it and not the rest of the elements.

But the container has a BG image. I’m trying to find a way to change the BG image of the container to be blurred out. I’m not inserting an image because I’m going to add elements on top of the container.

I believe you need custom code to achieve that. Again, if you position an image below your other elements you could easily solve it… set image position absolute on a lower z-index and that’s it.

Ahh ok I don’t know about the image position or lower z-index. I’m still learning how to use Webflow. I’ll give it a try. Thanks for the suggestion Quitos. If I have any more questions, I hope you don’t mind me asking again.

Hey @Monterje, Here is a workaround for you that could work.

Let me know if this helps! :grin:

1 Like

This is it! This is what I was looking for. Thank you so much Tiaz :grin:.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.