css transición opacidad desvanecimiento de fondo

Estoy haciendo untransition donde se convierte en blanco transparente, cuando un usuario está flotando sobre una imagen.

Mi problema es que necesito cambiar el color, que se desvanece, a negro. He intentado simplemente añadiendobackground:black; a la clase que contiene eltransition, pero no funciona desagradablemente, todavía se está desvaneciendo en blanco transparente.

El código css que estoy usando es:

.hover:hover {
  opacity: 0.2;
}

.item-fade {
  background: black;
  opacity: 0.8;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
<p>Hover image, the white opacity needs to be black :/</p>
<img src="//placehold.it/100x100" class="hover item-fade" />

Respuestas a la pregunta(4)

Su respuesta a la pregunta