JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
  <div class="back"></div>
  <div class="front"></div>
</div>

CSS

*{ 
box-sizing: border-box;
}
div.box {
  width: 200px;
  height: 200px;
  margin: 50px;
  background: red;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
div.box:hover div.back {
  --webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
  /* transform: rotate(360deg); */
}
div.back {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: blue;
  position: absolute;
  transform:  rotate(0deg);
  transition: .5s;
-webkit-clip-path: circle(0.5% at 0 0);
clip-path: circle(0.5% at 0 0);
}
div.front {
  left: 20px;
  top: 20px;
  right: 20px;
  bottom: 20px;
  border-radius: 50%;
  background: ;
  position: absolute;
}