Link Blocks - how to get hover behavior effect everything in block?

Design help General
1

Hi guys, me again!

I’ve got a link block that consists of an image, and two divs with text underneath the image.
What I’m trying to do is have the image slightly greyed out, and the divs/text a neutral colour - but on hover, have the image come to full opacity, and the divs/text underneath change to a bright colour.

Like this example:

1015×423 55.4 KB

I can’t for the life of me figure it out! I can change the whole block as one, or add a hover effect to each individual element, but not change multiple elements within the one link-block.

Any ideas?

Public link:
https://webflow.com/design/gongkwon?preview=34c7c9fa19cec3098dcf0c5bc92aa17f

2

Until parent psuedo + child is supported, I.e.

.some-parent-element:hover .target-child-class { some changes }

You’ll have to do this via the header embed area with a script tag.

3

ahh ok, thanks :smile:

4

I was trying to do the same a while back. Depending on how many div layers you are trying to animate, you can do this with adjacent sibling selectors. That method is all CSS. Alternatively, Jquery Animate is the simplest way for now.

1 Like
5

and that right there is why I love the Webflow community, people so willing to help others so quickly and without the usual internet stupidness!

Brilliant, thanks for that Jonas, that will work a treat.

1 Like