Streaming live at 10am (PST)

Hover in columns


#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.


#7

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

Watch video HERE.


#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!


#9

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