JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hexGrid">
    <div class="hexGridA">
      <div class="hex"><img src="https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg" alt="pic"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
    <div class="hexGridB">
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
    <div class="hexGridA">
      <div class="hex"><img src="https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg" alt="pic"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
    <div class="hexGridB">
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
    <div class="hexGridA">
      <div class="hex"><img src="https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg" alt="pic"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
    <div class="hexGridB">
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
  </div>

CSS

img {
  width: 100%;
  height: auto;
  display: block;
  object-fit:cover;
}

.hexGrid {
  width: 75%;
  margin: 1% auto;
  background-color: mediumaquamarine;
}

.hexGridA,
.hexGridB {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  pointer-events:none;
}

.hexGridB {
  transform: translateX(calc(100%/6));
  margin: calc(-9.62% + 2px) auto; /* 100%*cos(30)/9 */
}

.hex {
  display: flex;
  pointer-events:initial;
  width: calc(100%*2/3 - 2px);
  background-color: #424242;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hex:hover {
  background:red;
}
.hex::before {
  content: "";
  padding-top: 86.6%;/* 100%*cos(30) */
}