[SOLVED] Opacity's Initial State Set To 0%; However, The Element Starts With An Opacity Of 100%

Design help Animations & Interactions
1

I’m having trouble with Webflow animations, and I think I might be missing a fundamental step.

I’m creating a slider where a “View Image” text appears when the user hovers over an image and disappears when they move the cursor away. The animation works, but the text is visible initially. When you hover over the image, the text disappears first and then the animation runs.

Additionally, some elements are reacting as they should, but others have decided they don’t want to co-operate. All these items are within a Collection List, so they should all be exactly the same.

Why isn’t the text starting with an opacity of 0?

image
image267×911 32.5 KB

image
image276×902 19.6 KB

image
image1290×150 82.2 KB

2

Issue has been solved.

The subtitle text had an initial page load animation across all subtitles which was fading it into view.

I simply changed the subtitle class so that it wouldn’t have the page load class applied.