Blur image on hover without blurring text?

Hi everyone,

I want recreate the collage on the webflow homepage, seen at the “Craft precise interactions and animations” section. So basically a bunch of rectangles and squares all aligned with background images, and a hover animation. Any help will be much appreciated!

Many thanks

Hi Forbes,

I’m not too sure what you’re seeing at that section as I’m seeing an animation (I believe it’s a video file) and some text on the right hand side of it like below :

If so then that’s just I believe a video file and then some text next to it, probably done with a section and then a row with two columns or perhaps even just two divs to hold the content.

Is this what you’re referring to or something else?

Best wishes,

Mark

Hi Mark, that is exactly what I’m referring to yes! Sorry should’ve been more specific haha. I would like to know how to achieve this, ideally from scratch. Only made one website on webflow and I need a full refresh on the UI etc.

Many thanks

Hiya,

Okay so are you more referring to the layout of that section as opposed to what’s actually in the section so in other words the video and text aren’t important but the layout is?

Mark

I should be able to do the text just fine, I just want to work out how to create this collage of boxes, each linking to a different page, and create the hover effect that makes them go from a 50% opacity grayscale to a 0%. I will then deal with the text :slight_smile:

Thanks

Ah so are you more referring to the effect that the video shows?

Sorry I had thought when you said collage in that section that perhaps you were seeing something different or were perhaps looking at a different section.

If however you mean the pinkish looking squares and the purple one which change colour when hovered over then that’s fairly simple using a hover animation.

I’ve shown a really really simple one below but you can get really creative with these types of things.

I’d definitely advise taking a look at both the Webflow YouTube Channel and their videos on that page and also take a look at the Getting Started With Webflow videos and the Help Centre also.

You should hopefully get most of what you need from watching those videos definitely.

Hope that helps a bit.

Best wishes,

Mark

1 Like

Hi Mark,

So here is what I’m trying to achieve. A collage like this one I’ve created here. Ive put a link block inside a div block, given them all relative positioning, and applied a hover blur animation. I want to hover over each block and for it to show text on top of the image that is blurred. I have gotten this far, but now when I add text the text becomes blurred too. I’ve tried applying the hover blur to both the link block and div block, but in both instances it blurs the text too. Can you help me out? I’ve looked at numerous tutorials and forums but none help me specifically with what I want to achieve. I’ve added a link for anyone who wants to take a crack at what I’m trying to achieve.

Thanks!

My preview link: https://preview.webflow.com/preview/tempus-7b110f?preview=524cf90398d61dc07d0c6659e799a257

Ah okay I think I know what you’re after now and I believe (hoping I’m wrong - someone else can let us know about that one) that your best way to achieve that would be with interactions and one normal image and one copy of the image which is blurred.

Is this the sort of thing you want to create?

If so then what I did was this :

Please ignore the names used here as they’re really not that semantic but rather done for examples sake.

1 - DIV called Fade Animation Container
Set this DIV to position relative.
This DIV will hold all of our images and content.
Set width and height to equal our image size

2 - DIV called Image One
Position this absolute and top.
Add your image as a background image
Set the width and height of this DIV equal to the image.

3 - DIV called Image Two
Position this absolute and top.
Add your blurred image as a background image
Set the width and height of this DIV equal to the image.
Go to interactions and set an initial state for this Image Two DIV so that it’s opacity = 0%

4 - DIV called Fade Animation Content
Position this absolute and top.
Set the width and height of this DIV to 100%
Add some padding to the top, right, bottom and left if you want the text to be away from the edges a bit.
Add an interaction to this DIV called Animation Fade

Settings as here :

First hover triggers settings (these affect the images) :


Second hover trigger settings (these affect the content):

5 - DIV called Fade Animation Content Text
Set an interaction on this called Text Initial State
Settings as here :

This moves the text out of the way when the page initially loads and then in step 4 that moves the text in when you hover over that DIV.

6 - Paragraph of text
Standard paragraph of text styled however you want.

I’m hoping that’s all the steps correct and in the right order. Hopefully that will help a bit.

Hopefully that’s the sort of thing you’re after?

If you can’t follow the instructions above as I know there are a lot of steps there and I very well may have missed something out knowing me :wink: then let me know and I’ll put together a screen-cast later on today to show what I did.

Best wishes,

Mark

2 Likes

Hello @Forbes

Here is another solution for the blurred background. I created a project for topics like this, so if you go to page “Blurred Images” you can see how I built the complete interaction on the designer.

https://preview.webflow.com/preview/testingplayground?preview=eaf772107fb9b54c77952adb2d2647e2

Let me know if that helps you.

Cheers,

1 Like

Mark, you are a star!!

That is exactly what I’m trying to achieve, sorry if I wasn’t very clear! I will give your instructions a go once I’m in the office and report back. Thank you for your ongoing help!

Kind regards

Hiya,

No problem at all.

Mark

Hi Mark,

I’m certain I’ve followed all steps, but doesn’t seem to work? Could you possibly check it out on my preview link and see where I’ve gone wrong?

It’s the box with “Tempus TV” text inside.

Many thanks!

Hi Aaron,

Exactly what I’m looking for, as well as your social media icons page. Could you possibly give me a quick step by step? I’m trying to recreate on my website but to no avail.

Many thanks!

1 Like

Hiya,

Do you have this working now as I can see the effect you currently have and the text isn’t blurring for me. When I hover over that box then the normal version of the image fades out and the blurred image fades in and at the same time the text fades in. I’m not seeing the text blurred at any point though?

Best wishes,

Mark

Hi Mark got it working using Aaron’s method, but the image is initially blurred even with an interaction that makes the blurred div’s initial appearance opacity set to 0%? I’m so close to the finish line for this one effect haha!

Kind regards

Hello @Forbes

I see that you made it work! Good job. Let me know if I can help further.

Cheers,

1 Like

One very last thing to do if you want crisp edges to the boxes that the blurred images are in would be to apply an overflow of hidden to the DIV called Div Wrapper.

That will then ensure that the blur doesn’t bleed outside of the box. Totally up to the individual test though.

Glad you’ve got it all sorted now.

Best wishes,

Mark

1 Like

Guys!

You have been a massive help, really appreciate it! But I’ve run into a problem. If you check my share link, I’ve applied the exact same steps to each box in the collage and yet the magazines Div and the 6th Div do not work? The Magazines blur div doesn’t show, and the whole 6th Div doesn’t show at all!! Can you check my share link and let me know where I’ve gone wrong as I’ve applied the exact same steps to all boxes and yet only these two do not work. :triumph:

Thanks guys

You have set an animation for the “Div Block 6”, change it for none and you’re good to go,

and for the Magazines Div you have selected the wrong Blurred Div, change it for the newsletter one and that’s it

Cheers,

1 Like

Legend. I will get back to you if I have any other troubles!

Kind regards

1 Like