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!
- Click on the image and select hover
-
Scroll down to Filters and select Blur and adjust it depending how you like it
-
That’s it! Now go back to None
See if it works 
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! 
1 Like
This is it! This is what I was looking for. Thank you so much Tiaz .
1 Like
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.