JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img">
<div class="color">
<img src="http://s8.hostingkartinok.com/uploads/images/2016/08/226f89f29b12d63038dc02e52a0d4d9d.jpg" alt="цветное">
</div>
<div class="bw">
<img src="http://s8.hostingkartinok.com/uploads/images/2016/08/3b0735e0f2fa2bd7788cf57625016ba3.png" alt="чёрно/белое">
</div>
</div>

CSS

*{
	margin:0;
	padding:0;
}
.img{
	width:300px;
	height:193px;
	margin:20px auto;
	position:relative;
	border:4px double #dedede;
}
.img img{
	display:block;
	width:100%;
	height:100%;
}
.color{
	position:absolute;
	top:0; left:0;
	z-index:2;
}
.bw{
	position:absolute;
	top:0; left:0;
	z-index:3;	
	transition:opacity .5s;
}
.img:hover .bw{
	opacity:0;
}