A CodePen by Ian Soper.

index.slim

.container.cf
   .treatment.circle.one.small.effective
   .treatment.circle.one.medium.effective
   .treatment.circle.one.large.effective
   .treatment.circle.one.small.ineffective
   .treatment.circle.one.small.inconclusive

style.less

body {
    background: #ddd;
}

.container {
  margin: 2em;
  padding: 5em;
}

.circle  {
  background: #999;
  border-radius: 20em;
  position: relative;
  font-size: .8em; 
  margin: 1em;
  animation: dropin .5s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
  
  &:before {
    position: relative; 
    z-index: -10;
    background: #fff;
    font-weight: 400;
    border-radius: 10em;
    transition: all .6s linear;
     //box-shadow: 0 2px 4px rgba(0,0,0,.2);
  }
  
  &:hover, &.active {
    box-shadow: none;

    &:before {
      border:  solid #FFBF0F;
          animation: popup .5s ease;

    } 
  }
  
  &:active, &.active {
       
    &:before {
      display: none;

    }
  }
}

.size(@size) {
  width: @size;
  height: @size;
  &:before {
    padding: .3em .3em .3em 2.8em;
    margin-left: -7px;
    margin-top: -7px;
    height: @size;
    padding-left: (@size + 1.2em);
    line-height: (@size);
    border-width: 1px;
  }
  
  &:active {
    top: (-1px);
  }

}  

.small {
  @size: 1em;
  .size(@size);

}

.medium {
  @size: 2em;
  .size(@size);
  
}

.large {
  @size: 3em;
  .size(@size);
}

.effective {
  background: radial-gradient(ellipse at top left,
      #83c783 17%,
      #52b152 33%,
      #008a00 67%,
      #005700 83%,
      #002400 100%);
  
  &:hover {
    transition: all .1s;
    background: radial-gradient(ellipse at top left,
      #83c783 17%,
      #52b152 33%,
      #002400 100%);
  }
}

.inconclusive {
  background: #666;
}

.ineffective {
  background: red; 
}

.one {
  &:hover:before, &.active:before {
   content: "Beta Blockers";
   position: absolute; 
   width: auto;
   white-space: no-wrap;
   min-width: 7em;
  }
}

.two {
  left: 8em;
  top: 2em;
}

.three {
  left: 14em;
  top: 2em;
}

@keyframes dropin {
  0% {
    transform: scale(3);
    opacity: 0;
    transition: all .6s linear;
  }
  
  80% {
    transform: scale(0.9);
  }
  
  100% {
    transform: scale(1);
    opacity: 1.0;
  }
}

@keyframes popup {
  0% {
    //transform: scalex(.1) translateX(-4em);
    width: 10px;
    opacity: 0;
    transition: all .6s linear;

  }
  
  100% {
    //transform: scale(1);
    opacity: 1.0;
    width: auto;
  }
}

//clearfix

  .cf:before, .cf:after {
      content: " "; /* 1 */
      display: table; /* 2 */
  }
  
  .cf:after {
      clear: both;
  }
 
  .cf {
      *zoom: 1;
  }