Streaming live at 10am (PST)

Hover in columns

Hello fellow flowers,
I just started webflow today, I tried to find answers, but couldn’t come around what I look for although it seems pretty basic.

I try to do a dual entry on my homepage, with 2 columns, full browser (except for Navbar)
each of them contains :

  • Background image + Overlay black 90% + Blur
  • H1 + 3 lines subtitle

I would like the overlay to 70% and Blur to Zero on HOVER on the text elements only.

At the moment I managed an HOVER on the full Column, and the text is also blurred on None state wich is not the idea.

ReadOnly link :

Help greatly appreciated.

Ok, so just to clarify:

On the static state (no hover) for both columns, you want the text to be blurred and the background overlay to be 90%.

Then on Hover State for both columns, you want the text to be clear (no blur) and the background overlay to 70%.

Is this correct?

Or do you want one column’s text blurred and when you hover over another one then the other text is blurred?

Hey! Put the text elements in a doc then put the hover effect on that div

Both columns act the same.

None state : background blurred and dark.
Hover state: background sharp and lighter.

Texts always sharp.

Gotcha, ok! No problem. I will make a quick video.

1 Like

hey @Philemon I made a video showing you how I achieved this. Hope this helps you out!

Watch video HERE.

1 Like

Man I can’t express how thankful I am for such professional and dedicated video answer!
This community is very welcoming! I’ll make sure to stick around here :).

Thanks a lot again Noah!

1 Like

My absolute pleasure! Glad I could help! Cheers! :grin::call_me_hand:t3:

1 Like

Hey @Noah-R, any chance you can share the video again? I’m trying to do the same and came across this.


That project was moved or deleted and I don’t have the video anymore because I moved to Loom instead (screen sharing service). Sorry about that!