Create a multiple holes through a overlay to access elements under the overlay

Question

I am trying to create holes through an overlay to access elements under the screen

I don't want to do box-shadow effect as I would need multiple buttons to be highlighted like this. Doing an svg mask works but there are issues with clicking the buttons underneath.

Here are some sample codes I've tried to do.

Overlay: https://jsfiddle.net/bc1ovfk0/1/

 <div id="overlay">
    <div id="cutout"></div>
 </div>
 <div class="container">
    <button class="button" onclick="handleClick(event);">Click Me</button>
    <button class="button" onclick="handleClick(event);">Click Me</button>
    <button class="button" onclick="handleClick(event);">Click Me</button>
    <button class="button" onclick="handleClick(event);">Click Me</button>
</div>

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

#overlay > * {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}

.container{
    display: grid;
    grid-gap: 5em;
    padding-top: 20px;
}

.button{
    padding: 10px;
    text-align: center;
    cursor: pointer;
    background-color: blue;
    color: white;
    font-size: 2em;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #333;
}

#cutout {
  display: inherit;
  background-color: transparent;
}

handleClick = (event) => {
  document.getElementById('overlay').style.display = 'block';
  const elBoundingRect = event.srcElement.getBoundingClientRect();
  const overlay = document.getElementById('overlay');
  const insetValue = "polygon(" + elBoundingRect.x + "px " + elBoundingRect.y + "px, " 
                           + elBoundingRect.right + "px " + elBoundingRect.top + "px, "
                           + elBoundingRect.right + "px " + elBoundingRect.bottom + "px, "
                           + elBoundingRect.left + "px " + elBoundingRect.bottom + "px)";

  debugger;
  const cutout = document.getElementById('cutout');
  cutout.style.clipPath = insetValue;
}

svg mask fiddle

Answer 1

Instead of "creating holes", set the overlay's z-index to -1, then set the z-index of the elements you want to be highlighted to a number bigger than -1:

Fiddle: https://jsfiddle.net/sqyw75en/

#overlay > * {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}

.button{
    z-index: 1;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    background-color: blue;
    color: white;
    font-size: 2em;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #333;
}