JSFiddle - React, Tailwind, and code Playground

HTML

<section class="modules">
  <div class="container">
    <div class="row">
      <div class="col-md-4">

        <img src="https://yt3.ggpht.com/-TzTg3RN8mUQ/AAAAAAAAAAI/AAAAAAAAAAA/5e9M5aM9RZ4/s100-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="Advancement" class="module-1" id="1">
        <img src="https://www.tensorflow.org/images/cropped_panda.jpg" alt="Marketing" class="module-2" id="2">

      </div>
    </div>
  </div>
</section>

CSS

section.modules {
  background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
  width: 300px;
  height: 300px;
  display: block;
}

JavaScript

var el = document.getElementsByClassName('module-1');
var section = document.getElementsByClassName('modules');

el[0].addEventListener('mouseover', function() {
  section[0].style.backgroundImage = 'url(https://s-media-cache-ak0.pinimg.com/originals/ec/a1/a2/eca1a22c5813a8f00a06d57c8d19bc90.jpg)';
})
el[0].addEventListener('mouseout', function() {
  section[0].style.backgroundImage = 'url(https://www.w3schools.com/css/trolltunga.jpg)';
})