JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div class='hover' id="redL"></div>
  <div class='hover' id="greenL"></div>
  <div class='hover' id="blueL"></div>
  
  <div id="big">

  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  background: #eee;
}

#redL {
  background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
  background-position: center center;
  background-size: cover;
}
#redL:hover ~ #big {
  background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
  transition-delay: 0s;
  transition: background-image 0s;
}

#greenL {
  background-image: url('https://cml.sad.ukrd.com/image/572806.jpg');
  background-position: center center;
  background-size: cover;
}

#blueL {
  background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
  background-position: center center;
  background-size: cover;
}

.hover {
  display: block;
  width: 50px;
  height: 50px;
  float: left;
  margin: 20px;
}

#greenL:hover ~ #big {
  background-image: url('https://cml.sad.ukrd.com/image/572806.jpg');
  transition-delay: 0s;
  transition: background-image 0s;
}

#blueL:hover ~ #big {
  background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
  /* background: blue; */
  transition-delay: 0s;
  transition: background-image 0s;
}

#big {
  width: 50vw;
  height: 50vh;
  background-image: url('https://cml.sad.ukrd.com/image/643849.jpg');
  clear: both;
  margin: auto;
  transition: all .1s 604800s;
}