Hexagon Image with Color Overlay? - html

Question

I'm trying to design a website section that has 3 hexagons lined up. Inside the hexagons I want an image, which I have figured out how to do. BUT I also want to add a color overlay. Every time I try, the image disappears and the overlay gets doubled up in some places because of how I had to make the hexagon shape.
You can check out the code or see it live: https://jsfiddle.net/dfmcu4gt/
If you could tell me how to do this in tailwind CSS that would be even better.
#overlay {
background: rgba(9, 37, 90, 0.4);
object-fit: cover;
z-index: 2;
}
.hexagon {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url(https://www.uplers.com/wp-content/uploads/2020/06/Hiring-Web-Developers-Agencies-vs-Freelance-Portals.jpg);
background-size: auto 346.4102px;
background-position: center;
}
.hexagon1 {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url(https://www.octalsoftware.com.sg/blog/wp-content/uploads/2019/07/inhouse-developers-team.jpg);
background-size: auto 346.4102px;
background-position: center;
}
.hexagon2 {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url(https://blog.hubspot.com/hubfs/WordPress%20developer%20reviewing%20WordPress%20core.jpg);
background-size: auto 346.4102px;
background-position: center;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 43.93px;
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 300.0000px;
height: 173.20508075688775px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -106.0660px;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -106.0660px;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 0.0000px;
left: 0;
width: 300.0000px;
height: 173.2051px;
z-index: 2;
background: inherit;
}
<div id="overlay" class="hexagon">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
<div class="hexagon1">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
<div class="hexagon2" style="">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>