Interactive Image Maps and Closable Popups

Question

I am trying to create an interactive image map with closable popups. I used the example from here https://matemarschalko.medium.com/interactive-image-maps-and-closable-popups-with-html-and-css-only-31fe36c70092 and tried to implement in my project. I am not sure what is missing. Here is my code. Please advise. Thanks.

main {
  display: flex;
  align-items: center;
  justify-content: center;
}
area {
  outline: 5px solid var(--red);
}
.popup {
  padding: 20px;
  background-color: rgba(100, 100, 100, 0.9);
  color: white;
  font-weight: 100;
  font-size: 14px;
  position: absolute;
}
opacity: 0;
transform: scale(0);
.popup > .close {
  position: absolute;
  right: -10px;
  top: -10px;
  background-color: black;
  padding: 4px 10px;
}
.popup:target {
  opacity: 1;
  transform: scale(1);
}

    <img src="http://tinypic.com/images/goodbye.jpg">


<map name="desk-items">
  <area alt="headphones"  title="headphones" href="#headhphones"  coords="118,36,148,80" shape="rect">
  <area alt="peripherals"  title="peripherals"  href="#peripherals"  coords="121,84,198,118" shape="rect">
</map>
    <div class="popup" id="headhphones">
  An awesome pair of headphones!
  <a class="close" href="#">X</a>
</div>
<div class="popup" id="peripherals">
  These are the peripherals: the keyboard and the mouse.
  <a class="close" href="#">X</a>
</div>