I've run into a problem where using the CanvasGroup component to fade in/out several Image components under a hierarchy produces an unwanted result where each individual sprite that overlaps with another sprite will "blend" its color values in the overlapping areas like so:

The intended effect I'd want is for the red and blue squares to fade out together like they were one sprite.  

As you can see, the overlapping parts of the squares are not "blending together".

One hack is to just overlay a blank image of the same size as all of the image components shown on the screen and just fade that. However, this doesn't work at all if the overlayed image also has several other image components.

I would like to know if there are any other alternatives that aren't too complicated.

I've run into a problem where using the CanvasGroup component to fade in/out several Image components under a hierarchy produces an unwanted result, where each individual sprite that overlaps with another sprite will "blend" its color values in the overlapping areas like so:

The intended effect I'd want is for the red and blue squares to fade out together like they were one sprite. 

As you can see, the overlapping parts of the squares are not "blending together".

One hack is to just overlay a blank image of the same size as all of the image components shown on the screen and just fade that. However, this doesn't work at all if the overlayed image also has several other image components.

I would like to know if there are any other alternatives that aren't too complicated.