How to separate overlays on a hexagon grid - html

Question

I have a hexagon grid and have added an overlay but the issue is all of hexagons show the same overlay. Want to see about how to separate so each hexagon will have its own overlay and I can place different words/phrases on each one. My end goal is for each hexagon to not only say something different but link to different pages. Thank ya!!!
CSS:
img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.hexagon-gallery {
margin: auto;
margin-top: 50px;
max-width: 1000px;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 200px;
grid-gap: 14px;
padding-bottom: 50px;
}
.hex {
display: flex;
position: relative;
width: 240px;
height: 265px;
background-color: #424242;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hex:first-child {
grid-row-start: 1;
grid-column: 2 / span 2;
}
.hex:nth-child(2) {
grid-row-start: 1;
grid-column: 4 / span 2;
}
.hex:nth-child(3) {
grid-row-start: 1;
grid-column: 6 / span 2;
}
.hex:nth-child(4) {
grid-row-start: 2;
grid-column: 1 / span 2;
}
.hex:nth-child(5) {
grid-row-start: 2;
grid-column: 3 / span 2;
}
.hex:nth-child(6) {
grid-row-start: 2;
grid-column: 5 / span 2;
}
.hex:nth-child(7) {
grid-row-start: 2;
grid-column: 7 / span 2;
}
.hex:nth-child(8) {
grid-row-start: 3;
grid-column: 2 / span 2;
}
.hex:nth-child(9) {
grid-row-start: 3;
grid-column: 4 / span 2;
}
.hex:nth-child(10) {
grid-row-start: 3;
grid-column: 6 / span 2;
}
.container {
position: absolute;
width: 50%;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 15%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
position: absolute;
right: 60px;
top:130px;
}
a:hover, a:active {
background-color: red;
}
<div class="container">
<section class="hexagon-gallery">
<div class="hex"><img src="img/hiw.png"> <div class="overlay">
<div class="text">Hello World</div>
This is a link
</div></div>
<div class="hex"><img src="img/wc.png"></div> <div class="overlay">
<div class="text">Hello World</div>
This is a link
</div>
<div class="hex"><img src="img/sc.png"> <div class="overlay">
<div class="text">Hello World</div>
This is a link
</div></div>
<div class="hex"><img src="img/ew.png"> <div class="overlay">
<div class="text">Hello World</div>
This is a link
</div></div>
</section>
</div>