项目标题周围的六边形边框

Question

我正在构建一个六边形的链接，我得到了我想要的基本形状，但我接下来想要实现的是在我悬停时在我的周围有一个白色的六边形2px边框。基本上是这个内部的另一个六边形，但内容透明 - 只有六边形的白色边框。

＆＃13;

＆＃13;

#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  font-size: 16px;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility:hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex::after{
  content:'';
  display:block;
  padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
}

.hexIn{
  position: absolute;
  width:96%;
  padding-bottom: 110.851%; /* =  width / sin(60) */
  margin:0 2%;
  overflow: hidden;
  visibility: hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
  -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
  transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}

.hexIn * {
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}

.hexLink {
  display:block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;
  -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
  -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
  transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}

.hex img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  -webkit-transform: rotate3d(0,0,0,0deg);
  -ms-transform: rotate3d(0,0,0,0deg);
  transform: rotate3d(0,0,0,0deg);
}

＆＃13;

<ul id="hexGrid">
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
        <div class="hex-content">
            <h2>This is a title</h2>
        </div>
      </a>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

我尝试用另一个较小的六边形来解决这个问题但是我无法实现我想要的效果。

FIDDLE：https://jsfiddle.net/4zscs68a/