Help with separating overlays

[Mekaboo]

Hey all!!!

I have overlays working on my hexagon grid but the issue is I cant get the overlays to separate for each hexagon. How do I get it to where each hexagon will have its on overlay? Thankya😊

 

 <div class="container">
<section class="hexagon-gallery">
      <div class="hex"><img src="img/hiw.png"> <div class="overlay">
    <div class="text">Hello World</div>
    <a href="default.asp" target="_blank">This is a link</a>    
  </div></div>
      <div class="hex"><img src="img/wc.png"> <div class="overlay">
    <div class="text">Hello World</div>
     <a href="default.asp" target="_blank">This is a link</a>     
  </div></div>
      <div class="hex"><img src="img/sc.png"> <div class="overlay">
    <div class="text">Hello World</div>
      <a href="default.asp" target="_blank">This is a link</a>    
  </div></div>
      <div class="hex"><img src="img/ew.png"> <div class="overlay">
    <div class="text">Hello World</div>
      <a href="default.asp" target="_blank">This is a link</a>    
  </div></div>
    </section>
  </div>