[css] css transition opacity fade background

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 fades to, to black. I have tried just simply adding background:black; to the class that contains the transition, but it does not work unfurtunately, it's still fading into white transparent.

The css code I am using is:

.hover:hover {_x000D_
  opacity: 0.2;_x000D_
}_x000D_
_x000D_
.item-fade {_x000D_
  background: black;_x000D_
  opacity: 0.8;_x000D_
  transition: opacity .25s ease-in-out;_x000D_
  -moz-transition: opacity .25s ease-in-out;_x000D_
  -webkit-transition: opacity .25s ease-in-out;_x000D_
}

<p>Hover image, the white opacity needs to be black :/</p>_x000D_
<img src="//placehold.it/100x100" class="hover item-fade" />

http://jsfiddle.net/6xJQq/13/

.container {
    display: inline-block;
    padding: 5px; /*included padding to see background when img apacity is 100%*/
    background-color: black;
    opacity: 1;
}

.container:hover {
    background-color: red;
}

img {
    opacity: 1;
}

img:hover {
    opacity: 0.7;
}

.transition {
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s  ease-in-out;
}

Please note that the problem is not white color. It is because it is being transparent.

When an element is made transparent, all of its child element's opacity; alpha filter in IE 6 7 etc, is changed to the new value.

So you cannot say that it is white!

You can place an element above it, and change that element's transparency to 1 while changing the image's transparency to .2 or what so ever you want to.

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

<div class="ctr"><img ... /></div>