html, body { height: 100%; padding: 0; margin: 0; }

$url: 'http://defwalls.com/wallpapers-n/women-people-faces-_4209-43.jpg';

$weight: 0.6; // 'weights' the initial disordering

$ratio: 1680/1050; // width over height
$pixel-dimension: 100px;
$max-dimension: 1000px; // must be multiple of pixel-dimension

$width: null;
$height: null;

@if $ratio < 1 {
  $height: $max-dimension;
  $width: round($height * $ratio / $pixel-dimension) * $pixel-dimension;
} @else {
  $width: $max-dimension;
  $height: round($width / $ratio / $pixel-dimension) * $pixel-dimension;
}

.pixelated {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  position: relative;
  width: $width;
  height: $height;
  -webkit-filter: grayscale(100%);
  
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: $width; height: $height;
    background-image: url($url);
    background-size: $width $height;
    opacity: 0;
    transition: opacity 2s 5s;
  }
  
  &:hover:after {
    opacity: 1;
  }
}

$rows: -1 + $height / $pixel-dimension;
$cols: -1 + $width / $pixel-dimension;

[class^='pixel-'] {
  position: absolute;
  width: $pixel-dimension;
  height: $pixel-dimension;
  background-image: url($url);
  background-size: $width $height;
  border-radius: 50%;
  box-shadow: 0 0 3px 2px rgba(255, 255, 255, 0.2);
  transition: 3s ease-in-out;
  transform: scaleX(0.9) scaleY(0.9);
}

@for $i from 0 through $rows {
  @for $j from 0 through $cols {
    .pixel-#{$i}-#{$j} {
      background-position: (-$j * $pixel-dimension) (-$i * $pixel-dimension);

      left: (1 - $weight) * $j * $pixel-dimension + $weight * random() * ($cols - 1) * $pixel-dimension;
      top: (1 - $weight) * $i * $pixel-dimension + $weight * random() * ($rows - 1) * $pixel-dimension;
    }
    
    .pixelated:hover .pixel-#{$i}-#{$j} {
      left: $j * $pixel-dimension;
      top: $i * $pixel-dimension;
    }
  }
}