css transition opacity fade background

Question

I am doing a transition where it fades into transparent white, when a user is hovering an image.

My problem is that I need to change the color, that it

Answer 1

It's not fading to "black transparent" or "white transparent". It's just showing whatever color is "behind" the image, which is not the image's background color - that color is completely hidden by the image.

If you want to fade to black(ish), you'll need a black container around the image. Something like:

.ctr {
    margin: 0; 
    padding: 0;
    background-color: black;
    display: inline-block;
}

and