Can i trigger 2 actions with the same checkbox hack? Use of CSS

In this example, i have a side menu sliding from the left after the "checkbox hack" is checked. How can i drop a shadow overlay in the whole page (bring focus on the side menu), when the menu appears? I tried to apply the same methodology with checkbox, but it seems it doesn't work. Any help?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* You can't modify checkbox so hide it */

#hamburger-checkbox {
  display: none;
}


/* Use label instead */

.hamburger {
  font-size: 30px;
  position: absolute;
  z-index: 99;
}


/* Use :checked to indicate when it's checked */

#hamburger-checkbox:checked~.nav {
  transition: 2s ease;
  transform: translateX(0px);
}

.nav {
  width: 200px;
  height: 100vh;
  background: orange;
  transform: translateX(-200px);
  transition: 2s ease;
  padding: 40px 10px;
}

.nav a {
  display: block;
  text-align: center;
  padding: 10px;
}

.color-overlay{
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  opacity: .58;
  background: #787777;
  transition: 0.1s ease;
}

#hamburger-checkbox:checked ~ .color-overlay{
  width: 100%;
  transition: 0.1s ease;
}

<div class="color-overlay"></div>
<header>
  <input type="checkbox" id="hamburger-checkbox">
  <label class="hamburger" for="hamburger-checkbox">☰</label>

  <nav class="nav">
   <a href="#">Home</a>
   <a href="#">About</a>
   <a href="#">Contact</a>
   <a href="#">Projects</a>
  </nav>
</header>