body{
  margin: 0%;
}

.zone * {
  height: 50%;
  width: 20%;
  z-index: 2;
}

.zone{
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: top;
  flex-wrap: wrap;
}

.background{
  position:fixed;
  width: 100%;
  height: 100vh;
  inset:0;
  background:beige;
  transition:0s;
  z-index:1;
}

a{
  z-index: 3;
  opacity: 0;
  font-size: 5em;
}

.z1:hover ~ .background { background:red; }
.z2:hover ~ .background { background:purple; }
.z3:hover ~ .background { background:yellow; }
.z4:hover ~ .background { background:green; }
.z5:hover ~ .background { background:blue; }
.z6:hover ~ .background { background:aquamarine; }
.z7:hover ~ .background { background:orange; }
.z8:hover ~ .background { background:olive; }
.z9:hover ~ .background { background:pink; }
.z10:hover ~ .background { background:gray; }