<img src = "image_path" class="image">

.image{
    -webkit-filter:grayscale(100%);
}
.image:hover{
    -webkit-filter:grayscale(0%);
    transition: 1s;
}

<img class="cores" src="http://cinemacao.com/wp-content/uploads/2013/12/Scarlett-CAPA-2.jpg">
<img class="preto" src="https://cdn3.artstation.com/p/assets/images/images/001/113/371/large/nehaal-gonsalves-scarlet-johansson-face.jpg?1443931918">

img {
  position: absolute;
  width: 100px;
  transition: 1s;
}
.preto:hover {
  opacity:0;
}