Color alpha for images in an array fail to change...

I am making a health bar that floats above a player that you shoot. It is composed of two images a red background and a green foreground that changes size with the health of the player. Most of the time i want the alpha of both images to be 0 so the health bar can not be seen, but after the player is shot i want to set both alphas to 100 wait 2 seconds and then fade it back to 0.

The code I have below is called from a script that determines if a object hit by a ray cast is tagged player and if so calls FadeOut on the canvas that is a child of the hit player.

     public IEnumerator FadeOut()
     {
         CanvasRenderer[] healthbars = GetComponentsInChildren<CanvasRenderer>();
 
         foreach (CanvasRenderer bar in healthbars)
         {
             Color temp = bar.GetComponent<Image>().color;
             temp.a = 100;
             bar.GetComponent<Image>().color = temp;
             yield return new WaitForSeconds(2);
             bar.GetComponent<Image>().CrossFadeAlpha(0, 1f, false);
         }
     }

This works (although for some reason the background appears and fades out and the foreground does the same with a delay from when the first starts) but it only works once. i thought the part where i set temp to 100 and then set the image color to temp would make it appear again after it already faded out. i can tell that it is still running on both bars when i add Debug.Log(healthbars) it shows 2 objects in the console every time i shoot a player. What i am asking is for help resetting the alpha to 100 when a player is shot for the second time.