"ghost" of draggable honeycomb element

Question

I created a grid with draggable honeycomb-shaped divs (with just css, no svg/img/canvas). I want them to be both draggable and dropable, so that if I drop one onto another, their content swaps. Vue.js handles it.

The problem is: when I start to drag an element, a transparent ghost of the dragged honeycomb appears to follow the cursor. That's what I want, but that transparent ghost for some reason also has parts of neighbor honeycombs, as if the transparent ghost is a rectangle cropped screenshot of the dragged element region of the page.

I can rid off these artifacts by setting draggable element's opacity to less than 1. But it's content also becomes transparent, image and text inside the honeycomb. Is it possible to customize the dragged transparent ghost of the draggable element? Or is there some solution?

/*@import "bourbon";*/

html {
  /*background-color: lightgray;*/
  box-sizing: border-box;
  font-family: arial;
}


/*$border: 15px;
$width: 100px;
$height: ($width*1.7320508075688772935274463);
$hex-margin: $width*.26;
$widthinner: 90px;
$heightinner: ($widthinner*1.7320508075688772935274463);*/

.hexy {
  position: relative;
  margin: 1px 26px;
  background-color: gray;
  height: 173px;
  width: 100px;
  /*outline: 1px solid red;*/
  display: inline-block;
  text-align: start;
}

.gold {
  background-color: gold
}

.blue {
  background-color: skyblue
}

.gray0 {
  background-color: DarkSeaGreen
}

.gray1 {
  background-color: gray
}

.gray2 {
  background-color: darkgray
}

.gray3 {
  background-color: lightgray
}

.hexy,
.hexy:before,
.hexy:after {
  height: 173px;
  width: 100px;
}

.hexy:before {
  position: absolute;
  content: "";
  background-color: inherit;
  transform: rotate(60deg);
  overflow: hidden;
}

.hexy:after {
  position: absolute;
  content: "";
  background-color: inherit;
  transform: rotate(-60deg);
  /*overflow: hidden;*/
}


/*.hexy:hover {
  background-color: #E48B34;
  cursor: pointer;
  z-index: 105;
}*/

.hexy:nth-child(odd) {
  top: 88px;
}

.hexy.gray0:nth-child(odd) {
  top: auto;
}

.hexynone {
  position: relative;
  display: inline-block;
  height: 173px;
  width: 100px;
  margin: 1px 26px;
}

.hexynone:nth-child(odd) {
  top: 88px;
}

[draggable] {
  user-select: none;
  -webkit-user-drag: element;
}

.hex-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  font-size: 1rem;
  text-align: center;
  z-index: 100;
  /* user-select: none; */
}

.hex-content>img {
  height: 100px;
  width: 100px;
  margin: 0 20px;
  display: block;
  /*text-align: center;*/
}

.hex-content>p {
  margin: 0;
  font-weight: bold;
}


/*.hex-img {
  background-color: green;
  background-position: 50% 50%;
  background-size: 100%;
  background-repeat: no-repeat;
  margin-bottom: 30px;
  height: 50px;
  width: 50px;
  }*/

.hex-container {
  width: 85%;
  height: auto;
  margin: 0 auto;
}

.ibws-fix {
  /* inline-block whitespace fix */
  font-size: 0;
  white-space: nowrap;
  text-align: center;
}

.hexyinner {
  position: absolute;
  /*margin: 1px $hex-margin;*/
  background-color: black;
  opacity: 0.5;
  height: 156px;
  width: 90px;
  top: 8px;
  left: 5px;
  /*outline: 1px solid red;*/
  display: inline-block;
}

.hexyinner,
.hexyinner:before,
.hexyinner:after {
  height: 156px;
  width: 90px;
  z-index: 20;
}

.hexyinner:before {
  position: absolute;
  content: "";
  background-color: inherit;
  transform: rotate(60deg);
  overflow: hidden;
}

.hexyinner:after {
  position: absolute;
  content: "";
  background-color: inherit;
  transform: rotate(-60deg);
  overflow: hidden;
}

<div class="hex-container">

  <div class="ibws-fix">

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

  </div>
  <div class="ibws-fix">

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

  </div>
  <div class="ibws-fix">

    <div class="hexynone"></div>

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

    <div class="hexynone"></div>

  </div>

</div>

Edition: Created a simplified codepen here: https://codepen.io/shepelevstas/pen/wPOpRq/

Try to drag any hex away and you'll see triangle artefacts - parts of naighbour elements.