Transitions on Color overlay on top of Background Image

Design help Animations & Interactions
1

This seems to be pretty straightforward but I can’t find a solution. I’ve recreated the one component I need to fix on a test page linked below.

Essentially I have a div with a background image as well as a transparent background color overlay in the normal state. On hover I have it set so that the color overlay goes to transparent. I’ve tried to add a transition into there but it doesn’t seem to be able to apply to the background color in this scenario. Any suggestions?

Here is my public share link: https://preview.webflow.com/preview/test-d0f194?utm_source=test-d0f194&preview=fe90677c122891e33668465b49a008ab

1 Like
2

Hey @yoon395

I think the problem comes from color overlay. We don’t have a color overlay transition property. You can use interactions. See how > https://www.loom.com/share/b92d4196589f4cfa99d63f619c7f561d

Feel free to reach out if you need some help :webflow_heart:

1 Like
3

Hey @PeterDimitrov, this is perfect! Thank you so much for the assistance. This makes a lot of sense.

1 Like
4

Hey Piter,
I’m having the same issue.
I have a bkg image and when people hover over it, I want to to go darker with a transition though. I can’t see the video on loom anymore as the page doesn’t exist.
Could you potentially help me out?

Thanks Piter,
Have a nice day