JSFiddle - React, Tailwind, and code Playground

HTML

<div class="god">
  <div class="parent">
    <div class="children">

      <img src="https://yt3.ggpht.com/-TzTg3RN8mUQ/AAAAAAAAAAI/AAAAAAAAAAA/5e9M5aM9RZ4/s100-c-k-no-mo-rj-c0xffffff/photo.jpg" class="module1" id="1">

      <img src="https://www.tensorflow.org/images/cropped_panda.jpg" class="module2" id="2">
    </div>
  </div>
</div>

CSS

.god .parent {
  pointer-events: none;
  height: 100px;
  background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
}

.god .parent .children .module1 {
  height: 100px;
  background: blue;
  pointer-events: all;
}

.god .parent:hover {
  background-image: url(https://s-media-cache-ak0.pinimg.com/originals/ec/a1/a2/eca1a22c5813a8f00a06d57c8d19bc90.jpg);
}