JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div>
  <span class="left"></span>
  <span class="right"></span>
  <span class="top"></span>
  <span class="bottom"></span>
</div>
<div>
  <span class="left"></span>
  <span class="right"></span>
  <span class="top"></span>
  <span class="bottom"></span>
</div>

CSS

div {
  width: 50px;
  height: 50px;
  position: relative;
  float: left;
  background: #eee;
  transition: .3s;
}
div:hover {
  background: red;
}
div:hover span {
  opacity: 1;
}
span {
  opacity: 0;
  transition: .3s;
}
span.left {
  width: 50px;
  height: 50px;
  background: grey;
  position: absolute;
  display: inline-block;
  left: -50px;
}
span.right {
  width: 50px;
  height: 50px;
  background: grey;
  position: absolute;
  display: inline-block;
  left: 50px;
}
span.top {
  width: 50px;
  height: 50px;
  background: grey;
  position: absolute;
  display: inline-block;
  left: 0px;
  top: -50px;
}
span.bottom {
  width: 50px;
  height: 50px;
  background: grey;
  position: absolute;
  display: inline-block;
  left: 0px;
  top: 50px;
}