Initial State Opacity Zero not behaving as I expect

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:

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.