Opacity change on BG element without affecting child element

Design help Animations & Interactions
1

Hi,

I was hoping some of you good people may be able to help me with a challenge.

I’m looking to recreate the hover effect you see on the grid section of this website:

I can get the opacity to shift on the column no problem, and have all the easing options available.

What I’m trying to ensure is that the text stays visible on hover, while the background opacity eases out. The opacity of the column or the div can ease out on hover, but as the text is a child element it fades out too.

The only other solution i have is to reduce the opacity on hover state to 0% in the BG colour section, but it’s too sudden and there are no easing options.

So I’m hoping there’s a wise mind out there that may be able to point me to a solution.

Thanks a million!

billy.

Here is my public share link: https://preview.webflow.com/preview/mccarthy-tax?utm_medium=preview_link&utm_source=designer&utm_content=mccarthy-tax&preview=6ffb68ee65bb481671f600d952fa25f5&mode=preview
(how to access public share link)

2

In this case instead of using opacity for your hover animation I would use color background:

3

Hi Aaron,

That’s perfect, thank you so much for you swift and responsive help with this. This works perfectly, and you saved me a lot of heartache!

Thank you again,

billy.

1 Like