Initial State Opacity Zero not behaving as I expect

Design help Animations & Interactions
1

If you look at the page titled “animationtest” in the shared project below, I am trying to put the opacity of the div titled darken to 0 initially. This div is to be used to just darken the photo once other timed animations are finished. I can’t get it to set to 0 opacity initially.

I have previously tried it by giving the div a black background and setting this opacity to 0 in exactly the same fashing and this worked fine. However once I change the background for an image contained within the div it appears this image is not affected by the 0% opacity initial state of the div.

What am I missing here?

Thanks for the help.

Here is my public share link: https://preview.webflow.com/preview/freefour?utm_medium=preview_link&utm_source=dashboard&utm_content=freefour&preview=0a098368e71e0681677b1b354c783aed&mode=preview

2

I have since solved this issue, it was a different div than had a invert filter applied to it that I was seeing and not the div that I thought.