Как такое реализовать?

<div class="img-block">
  <div class="text-1">Text-1</div>
  <div class="img img-1"></div>
  <div class="text-2">Text-2</div>
  <div class="img img-2"></div>
  <div class="text-3">Text-3</div>
  <div class="img img-3"></div>
</div>

.img-block {
  position: relative;
}
.img {
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index:-1;
}
.text-1:hover + .img-1 {
  background-color:red;
}
.text-2:hover + .img-2 {
  background-color:blue;
}
.text-3:hover + .img-3 {
  background-color:green;
}