JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <p id="milestone1">
    First Overlay
  </p>   
   <div class="img-overlay-container" style="width:400px;height:200px;">
     <img id="image1" src="blabla.jpeg"/>
  <div id="overlay1" onclick="alert('clicked');">
     </div>
    </div>  
  <p id="milestone2">
    Second Overlay
  </p>       
         <div class="img-overlay-container" style="width:100px;height:400px;">
     <img id="image2" src="blabla.jpeg"/>
  <div id="overlay2" onclick="alert('clicked');">
     </div>
    </div>  
</body>

CSS

.img-overlay-container{
  position: relative;
    display:inline-block;
}
.img-overlay-container > img{
  
}

.img-overlay-container > div{
  position:absolute; 
  top:0px; 
  left:0px; 
  width:100%;
  height:100%; 
  background: rgba(3,3,3,.1);
}