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.

Color alpha is between 0 and 1, not 0 and 255. Try:

temp.a = 100 / 255.0f;