Śmieszna siatka

HTML

<div id="grid">
  <div class="row">
    <div class="element">
      <div class="middle"></div>
      <div class="bottom"></div>
    </div>
    <div class="element">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="bottom"></div>
    </div>
    <div class="element">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="bottom"></div>
    </div>
  </div>
  <div class="row">
    <div class="element">
      <div class="middle"></div>
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
    <div class="element">
      <div class="middle"></div>
      <div class="left"></div>
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
    <div class="element">
      <div class="middle"></div>
      <div class="left"></div>
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
  </div>
  <div class="row">
    <div class="element">
      <div class="middle"></div>
      <div class="top"></div>
    </div>
    <div class="element">
      <div class="middle"></div>
      <div class="top"></div>
      <div class="left"></div>
    </div>
    <div class="element">
      <div class="middle"></div>
      <div class="top"></div>
      <div class="left"></div>
    </div>
  </div>
</div>

CSS

.element {
  height: 20px;
  width: 20px;
  background: red;
  margin: 3px;
}

.element > .top,
.element > .left,
.element > .bottom {
  height: 20px;
  width: 20px;
  background: rgba(0, 0, 0, .4);
  position: absolute;
  z-index: -1;
}

.element .top {
  transform: translate(0, -26px);
}

.element .left {
  transform: translate(-26px, 0);
}

.element .bottom {
  transform: translate(0, 26px);
}

.element:hover + .element {
  background: blue;
}

.element:hover > .top,
.element:hover > .left,
.element:hover > .bottom {
  z-index: 2;
  background: blue;
}

.row {
  display: flex;
}