JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ds1"></div>
<div id="ds2"></div>
<div id="ds3"></div>

<div class="pg-slide-gradient">Background 1</div>
<div class="pg-slide-gradient">Background 2</div>
<div class="pg-slide-gradient">Background 3</div>

CSS

.pg-slide-gradient {
  position: relative;
  display: inline-block;
}

#ds1, #ds2, #ds3 {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

#ds1 {
  background-image: url("http://images-1.gog.com/23382bd5e4e5deb7036d68e04286120df2a1d424881fcafb21ecd2c9a5c24ab5_bg_1920.jpg");
}

#ds2 {
  background-image: url("http://images-2.gog.com/a88f5d7a5161fb204d2f78adf14eea73e03dde54eb8ab516e50b077dcbb72cba_bg_1920.jpg");
}

#ds3 {
  background-image: url("http://images-3.gog.com/ab956772ba01063aadfb8cda56d2e9ed3a6e0abd1534ce94b5f3a524e085656f_bg_1920.jpg");
}

JavaScript

$('.pg-slide-gradient').mouseover(function() {
  var id= 'ds' + $(this).text().replace('Background ','');
  $('#ds1, #ds2, #ds3').each(function() {
    $(this).animate({
      opacity: this.id===id ? 1 : 0
    });
  });
});