JSFiddle - React, Tailwind, and code Playground

by Luca De Nardi

HTML

<section id="absolute-canvas">

  <img src="./images/logoWithShadow.png" id="logo" class="img-responsive animated zoomIn" alt="" title="СП ФИНКИ" />
  <div id="nav-container">
    <a href='#' class='deg0'></a>
    <a href='#' class='deg45'></a>
    <a href='#' class='deg135'></a>
    <a href='#' class='deg180'></a>
    <a href='#' class='deg225'></a>
    <a href='#' class='deg315'></a>
  </div>

</section>

CSS

#absolute-canvas a {
  display: block;
  position: absolute;
  top: 50%; 
  left: 50%;
  width: 4em; 
  height: 4em;
  margin: -2em;
  border-radius: 100%;    
  background: black;
  transition: all .5s;
}
.deg0 { 
  transform: translate(0);
} /* 12em = half the width of the wrapper */
.deg45 { 
  transform: rotate(45deg) translate(0) rotate(-45deg);
}
.deg135 {
  transform: rotate(135deg) translate(0) rotate(-135deg);
}
.deg180 { 
  transform: translate(0);
}
.deg225 { 
  transform: rotate(225deg) translate(0) rotate(-225deg);
}
.deg315 { 
  transform: rotate(315deg) translate(0) rotate(-315deg);
}
img:hover ~ #nav-container .deg0 { 
  transform: translate(12em);
} /* 12em = half the width of the wrapper */
img:hover ~ #nav-container .deg45 { 
  transform: rotate(45deg) translate(12em) rotate(-45deg);
}
img:hover ~ #nav-container .deg135 {
  transform: rotate(135deg) translate(12em) rotate(-135deg);
}
img:hover ~ #nav-container .deg180 { 
  transform: translate(-12em);
}
img:hover ~ #nav-container .deg225 { 
  transform: rotate(225deg) translate(12em) rotate(-225deg);
}
img:hover ~ #nav-container .deg315 { 
  transform: rotate(315deg) translate(12em) rotate(-315deg);
}