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');
    -webkit-transition-duration:10000s;
    -moz-transition-duration:10000s;
    -ms-transition-duration:10000s;
    -o-transition-duration:10000s;
    transition-duration:10000s;
}

#image:hover{
	background-image: url('http://g2f.nl/07vbp18');
  -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;
}