Image Blur On Hover

Hey, I was wondering how to make an image blur on hover as well as have text appear. I’ve managed to add an interaction so the text appears when you hover but not sure how to do the blur.

Essentially I’m looking for this to happen when hovering over the image.

https://preview.webflow.com/preview/mw-design?preview=cb9dcc18934e4f349537cc050113b48a

Thanks in advance


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

You could insert this code into your page:

https://hasteb.in/galezojepa.xml

And then give the item you want to blur the class blur and that blurs it.
You can also duplicate the layer you want to blur, set the opacity to 0 and then on hover to 100 (of the blur class) and that makes it blur on hover but that still doesn’t blur the entire thing.

This is a topic i started about the blur effect, i still can’t seem to get it working though :confused:

Thanks a lot, I’ll give this a go and see what happens!

I’ve tried to blur the image but I can’t get it to work for some reason, I’ve added the code on the home page and the class but nothing is happening.

The class is on the image under projects.

https://preview.webflow.com/preview/mw-design?preview=cb9dcc18934e4f349537cc050113b48a

Can anyone help with this? Thanks.

Very strange, i made a test site a while ago where some of the sections had the blur class and that worked, but now all of a sudden the blur doesn’t work…

I honestly have no idea on how to do this, i suggested this as a feature for Webflow a while ago, don’t know if it got picked up.

Would be cool to see CSS filters in webflow.

That is very odd. I’m at a bit of a loss then. The only other way I can think of doing it is laying 2 images on top of each other, the bottom one blurred and adding a interaction on hover which turns the opacity down on the top image revealing the one underneath, just to give the impression it’s blurring.

Not ideal as I’ll have to add 2 different images but it could work.

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