Hover in columns

Design help General
1

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 : https://preview.webflow.com/preview/philemons-first-project?utm_source=philemons-first-project&preview=a65650e65d71f867923a054191755b26

Help greatly appreciated.

2

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?

3

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

4

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

5

Both columns act the same.

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

Texts always sharp.

6

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

1 Like
7

Panel
Panel1680×948 1.25 MB

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

Watch video HERE.

1 Like
8

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
9

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

1 Like
10

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

Thanks!

11

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!