gist with a twist

person.css

/* - - - - - - - - - person Bubbles - - - - - - - */
.person {
  height: 50px;
  position: absolute;
  width: 50px;
}

.portrait {
  border: 4px solid #fff;
  border-radius: 50%;
  display: block;
  height: 50px;
  width: 50px;

  margin-left: -25px;
  margin-top: -25px;
  overflow: visible;

  position: absolute;
  z-index: 1;

  -webkit-box-shadow: 0 0 21px rgba(0, 0, 0, 0.15);
     -moz-box-shadow: 0 0 21px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 21px rgba(0, 0, 0, 0.15);

  -webkit-transition: all 200ms linear;
     -moz-transition: all 200ms linear;
      -ms-transition: all 200ms linear;
       -o-transition: all 200ms linear;
          transition: all 200ms linear;

  -webkit-transition-delay: 200ms;
     -moz-transition-delay: 200ms;
      -ms-transition-delay: 200ms;
       -o-transition-delay: 200ms;
}
  .portrait:hover {
    border-color: #3ea349;

    -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 11px rgba(0, 0, 0, 0.3);
  }

  .person.over .portrait {
    border-color: #ca4c29;
  }

.portrait .name {
  color: rgba(0,0,0,0);
  font-family: 'Avenir Next';
  font-weight:400;
  font-size: 110%;
  margin-left: -50px;
  margin-top: 0;
  text-align: center;
  width: 100px;

  position: absolute;
  top: 50px;
  left: 50%;
  z-index: 100;

  -webkit-transition: all 100ms linear;
     -moz-transition: all 100ms linear;
      -ms-transition: all 100ms linear;
       -o-transition: all 100ms linear;
          transition: all 100ms linear;

  -webkit-transition-delay: 200ms;
     -moz-transition-delay: 200ms;
      -ms-transition-delay: 200ms;
       -o-transition-delay: 200ms;
}
  .portrait:hover .name {
    color: rgba(0,0,0,.5);
    top: 60px;
  }

.coffee-token {
  background: transparent;
  background-size: 60px;
  border-radius: 25px;
  height: 60px;
  width: 60px;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 500;

  -webkit-transition: opacity 100ms linear;
     -moz-transition: opacity 100ms linear;
      -ms-transition: opacity 100ms linear;
       -o-transition: opacity 100ms linear;
          transition: opacity 100ms linear;
}