JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="svg-graphic" width="400" height="400" viewBox="20 0 1400 1430" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <g>
       <clipPath id="hexagonal-mask">
          <path d="M1298.2,338.6L730.1,5.9c-13.2-7.7-29.6-7.7-42.8,0L119.1,338.6c-12.9,7.7-21.3,21.9-21.3,37v665.8 c0,15.1,8,29.3,21.3,37l568.2,333.1c6.8,4,14.2,5.9,21.6,5.9s14.8-1.8,21.6-5.9l568.2-333.1c12.9-7.7,21.3-21.9,21.3-37V375.6 C1319.5,360.5,1311.2,346.3,1298.2,338.6z"/>
       </clipPath>
      <path d="M1298.2,338.6L730.1,5.9c-13.2-7.7-29.6-7.7-42.8,0L119.1,338.6c-12.9,7.7-21.3,21.9-21.3,37v665.8 c0,15.1,8,29.3,21.3,37l568.2,333.1c6.8,4,14.2,5.9,21.6,5.9s14.8-1.8,21.6-5.9l568.2-333.1c12.9-7.7,21.3-21.9,21.3-37V375.6 C1319.5,360.5,1311.2,346.3,1298.2,338.6z" stroke="black" stroke-width="22" class="test"/>
    </g>
    <g clip-path="url(#hexagonal-mask)">
      <a xlink:href="http://">
        <image height="100%" width="100%" preserveAspectRatio="xMidYMin slice" xlink:href="http://upload.wikimedia.org/wikipedia/en/thumb/0/08/DioHolyDiver.jpg/220px-DioHolyDiver.jpg" />
      </a>
       <rect x="0" y="0" width="100%" height="100%" class="cover"/>
    </g>
</svg>

CSS

.svg-graphic {
	background: #fff;
}

svg a {
  position: relative;
}

svg a image {
	-webkit-transition: opacity 300ms ease;
	-moz-transition: opacity 300ms ease;
	transition: opacity 300ms ease;
}
svg a:hover image {
  opacity: 0.6;
}

.cover {
  opacity: 0;
  fill: rgba(255,0,0,0.5);
}
.cover:hover {
  opacity: 1;
}