<div class="circle"></div>

.circle {
  width: 100px;
  height: 100px;
  position: relative;
  background: blue;
  border-radius: 100%;
}

.circle:before{
  content: "";
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 100%;
  background: red;
  transition: ease 0.3s;
}

.circle:hover:before{
  width: 100%;
  height: 100%;
}