JSFiddle - React, Tailwind, and code Playground

HTML

<a class="demo" href="">
<img class="raz" src="http://bronya-spb.ru/wp-content/uploads/2015/10/hitek-standart.jpg" />
<img class="dva" src="http://bronya-spb.ru/wp-content/uploads/2015/10/vnut_standart/hitek-2-standart.jpg" />
</a>

CSS

.demo { 
    position:relative; 
    margin:0 auto; 
    height: 100%;
    width: 35%;
    display: block;
}

  .demo img { 
    left: 0; 
    position:absolute; 
    top: 0; 
}

  .demo img.raz {opacity:0;filter:alpha(opacity=0);}
  .demo:hover img.raz {opacity:1;filter:alpha(opacity=100);}
  .demo:hover img.dva, .demo img.dva:hover {opacity:0;filter:alpha(opacity=0);}
  
  
  .demo img {
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}