<div class="color-change-menu">
  <a href="#" class="option one">Option one</a>
  <a href="#" class="option two">Option two</a>
  <a href="#" class="option three">Option three</a>
  <a href="#" class="option four">Option four</a>
  <div class="background"></div>
</div>

body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.color-change-menu {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 30vh 1fr 30vh 1fr;
  grid-template-columns: 1fr 30vw 1fr 30vw 1fr;
  
  .option {
    background-color: gray;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .background {
    background-color: ghostwhite;
    transition: background-color 1s;
    transition-delay:250ms;
    grid-area: 1/1/6/6;
    z-index: -10;
  }
  
  .option {
    color: #333;
    font: bold 1.5rem Arial, sans-serif;
    transition: font 1s, text-shadow 1s;
    transition-delay:250ms;
  }
  
  .option:hover {
    font: bold 3rem Arial, sans-serif;
    text-shadow: 2px 2px .2rem #555;
  }
  
  .option.one {
    grid-area: 2/2/3/3;
    background-color: powderblue;
  }
  
  .option.two {
    grid-area: 2/4/3/5;
    background-color: lightgoldenrodyellow;
  }
  
  .option.three {
    grid-area: 4/2/5/3;
    background-color: lightpink;
  }
  
  .option.four {
    grid-area: 4/4/5/5;
    background-color: thistle;
  }
  
  .one:hover ~ .background {
    background-color: powderblue;
  }
  
  .two:hover ~ .background {
    background-color: lightgoldenrodyellow;
  }
  
  .three:hover ~ .background {
    background-color: lightpink;
  }
  
  .four:hover ~ .background {
    background-color: thistle;
  }
  
}