JSFiddle - React, Tailwind, and code Playground

HTML

<div class="somediv" data-imgbefore="http://unsplash.it/300/300?random" data-imgafter="http//www.unsplash.it/300/300?random"></div>

CSS

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  font: caption;
}

.somediv {
  width: 70%;
  height: 250px;
}

JavaScript

// first get the element that we'll be interacting with
    var element = document.querySelector('.somediv');

    // assuming we managed to successfully get the element from the document
    if(element) {
        var before = element.getAttribute('data-imgbefore');
        var after = element.getAttribute('data-imgafter');

        if(before && after) {
            element.style.background = 'url(' + before + ')'; // set the first background

            element.addEventListener('mouseover', function(event) {
                element.style.background = 'url(' + after + ')';
            });
            
            element.addEventListener('mouseout', function(event) {
            	element.style.background = 'url(' + before + ')'; 
            });
        }
    }