JSFiddle - React, Tailwind, and code Playground

by Whre

HTML

<div id="image">
        </div>

CSS

#image {
	margin: 0 auto;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	height: 400px;
	background-image: url('http://g2f.nl/0d7cui8');
  -o-transition:color .1s ease-out, background 1s ease-in;
  -ms-transition:color .1s ease-out, background 1s ease-in;
  -moz-transition:color .1s ease-out, background 1s ease-in;
  -webkit-transition:color .1s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .1s ease-out, background 1s ease-in;
}

#image.transitioned {
	background-image: url('http://g2f.nl/07vbp18');
}

JavaScript

document.querySelector("#image").addEventListener("mouseover",function() {
    this.classList.add("transitioned");
});