A Pen by Captain Anonymous.

index.html

<div class="root">
  <div class="outer">
    <div class="box1 box"></div>
    <div class="box2 box"></div>
    <div class="box3 box"></div>
    <div class="box4 box"></div>
  </div>
</div>

sayme.markdown

sayme

A Pen by Captain Anonymous on CodePen.

License.

style.scss

.root{
  position:absolute;
  width:30px;
  height:30px;
  top:50%;
  left:50%;
}

.outer{
  position:absolute;
  width:100%;
  height:100%;
  background:red;
  transition:.1s;
  left:0;
  top:0;
  &:hover{
    width:400%;
    height:400%;
    top:-200%;
    left:-200%;
  }
}

.box{
  position:absolute;
  width:20%;
  height:20%;
  background:blue;
  border-radius:50%;
  &:hover{
    background:green;
  }
}

.box1{
  top:0%;
  left:50%;
}

.box2{
  top:5%;
  right:25%;
}

.box3{
  top:25%;
  right:5%;
}

.box4{
  top:50%;
  right:0%;
}