Resolved UI overlapping images, display the one behind

So... It might be a stupid question but let's say I have two images of a circle, one coloured another one black.

Both images are overlapping. On the Canvas UI the coloured one takes precedence and you can see it rendering however you cannot see the black circle under the coloured one (as they are overlapping).

Same example with an hourglass, you can see the coloured one and a black one with the same shape (same image) behind it, I would like to display the black one while the front image is being filled (using fillAmount).



Issue

My image on the foreground is a Filled image type (radia, vertical, does not matter). However, while the image is filling from 1-0 effectively disappearing, I still cannot see the black circle behind it.

What is the easiest way to allow for the part that is not filled to show the background image behind? I know using Sprites you can set masks and what not but I could not see it on the UI.

Am I missing something stupid or the sort order on the canvas cannot be circumvented out of the box while filling an image to show whatever UI element is behind?

 

Apologies, I was being stupid. I had the same script attached to the image behind, which was also disappearing.

I would remove the post but I cannot.