JSFiddle - React, Tailwind, and code Playground

by Niels Harbo

HTML

<div id="first-element">
    <p>Hover over the first image image!</p>
    <img src="http://www.nielsharbo.dk/media/images/content-images/portfolio/1-thumb.jpg" alt="Image to hover" onmouseover="overFunction();" onmouseout="outFunction();"/>
</div>
<div id="second-element">
</div>

CSS

#second-element { 
  height:160px;
    width:160px;
  background:url('http://www.nielsharbo.dk/media/images/content-images/portfolio/2-thumb.jpg');
}

JavaScript

function overFunction () {
    document.getElementById("second-element").style.backgroundImage="url('http://www.nielsharbo.dk/media/images/content-images/portfolio/3-thumb.jpg')";
}
function outFunction () {
    document.getElementById("second-element").style.backgroundImage="url('http://www.nielsharbo.dk/media/images/content-images/portfolio/2-thumb.jpg')";
}