$speed: 0.2s;
$size: 80vmin;
$followers: 300;
$cols: 17;
$rows: 18;
// 306 followers
$alpha: .5;
$mode: luminosity; 
$alpha2: .6;
$mode2: screen;
$mode32: normal;
html {
  background: black;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
body {
  margin: auto;
  display: block;
  position: relative;
  width: $size;
  overflow: visible;
  $sqrt: sqrt($followers);
  font-size: 0;
  line-height: 0;
  background: black;

  *{box-sizing: border-box;}

  .follower {
    display: inline-block;
    position: relative;
    $size: ($size/$cols);
    //height: (100%/$rows);
    width:  (100%/($cols));
    background-size: 100% auto;
    //transition: transform $speed;
    transition-property: transform, opacity;
    overflow: visible; 
    opacity: $alpha;
    mix-blend-mode: $mode;
    z-index: 3;
    transform: translate3d(0,0,0);
   img {
      width: 100%;
      height: 100%;
  }
    .name {
      $bg: #123;
      $fg: #dedede;
      font-size: 10px;
      position: absolute;
      bottom: 100%;
      margin-bottom: 10px;
      left: 0px;
      //right: -30px;
      border-radius: 3px;
      padding: 2px 10px;
      background: $bg;
      line-height: 1;
      overflow: visible;
      //text-overflow: ellipsis;
      //white-space: nowrap;
      color: $fg;
      text-transform: lowercase;
      font-family: sans-serif;
      //transition: all $speed;
      opacity: 0;
      pointer-events: none;
      &:before {
        content: '';
        position: absolute;
        top: 100%;
        left: 10px;
        border: 5px solid transparent;
        border-bottom: 0;
        border-top-color: $bg;
      }
    }
    &:hover {
      opacity: 1;
      mix-blend-mode: normal;
      z-index: 5;
     .name {
      opacity: 1;
      }
    }
  }
  .overlay2,
  .overlay {
    background-image: url(http://gravatar.com/avatar/1df167f8d2feea4676febb16c60f5f8f?s=512);
    background-size: cover;
    background-position: 50% 50%;
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    left: 0;
    pointer-events: none;
  filter: 
    blur(0px)
    contrast(1) 
    saturate(0.5) 
    brightness(1);
  
  }
  .overlay2 {
    z-index: 4;
    opacity: $alpha2;
    mix-blend-mode: $mode2;

  }
}

h1 {
  position: absolute;
  top: -10vmin;
  width: 100vw;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-family: sans-serif;
  font-weight: 900;
  font-size: 5vmin;
  line-height: 1;
  
}