JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"></script>
<img class="cores" src="http://cinemacao.com/wp-content/uploads/2013/12/Scarlett-CAPA-2.jpg">
<img class="preto" src="http://tbtc.fr/wp-content/uploads/2014/02/Cesar-39-Ceremonie-Cecile-de-France-Scarlett-Johansson-Cinema-TBTC-G-Communicaton-Noir-Blanc-Black-White.jpg">

CSS

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