$imgs: 
  'http://imgsrc.hubblesite.org/hu/db/images/hs-2013-17-a-xlarge_web.jpg' 
  'http://imgsrc.hubblesite.org/hu/db/images/hs-2006-01-a-xlarge_web.jpg' 
  'http://imgsrc.hubblesite.org/hu/db/images/hs-2006-10-a-xlarge_web.jpg' 
  'http://imgsrc.hubblesite.org/hu/db/images/hs-2013-12-a-xlarge_web.jpg' 
  'http://imgsrc.hubblesite.org/hu/db/images/hs-2006-46-a-xlarge_web.jpg';
$diam: 32vmin;
$r: 32vmin;

$n: length($imgs);
$base-angle: 360deg/$n;
$start-angle: random(90)*1deg;
$bg-dim: 62.5em;

.gallery {
  list-style: none;
  
  &:before, &__item:last-child {
    position: fixed;
    top: 50%; left: 50%;
    margin: -$bg-dim/2;
    width: $bg-dim; height: $bg-dim;
  }
  
  &:before {
    z-index: -1;
    border-radius: 50%;
    content: '';
    box-shadow: inset 0 0 5em dimgrey, 0 0 0 50vw dimgrey;
  }
  
  &__item {
    
    background-blend-mode: luminosity;
    transition: transform .5s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-image .5s;
    
    &:not(:last-child) {
      position: absolute;
      top: 50%; left: 50%;
      width: $diam; height: $diam;
      border-radius: 50%;
      box-shadow: 0 0 .5em white;
    }
    
    @for $i from 0 to $n {
      &:nth-child(#{$i + 1}) {
        $curr-angle: $start-angle + $i*$base-angle;
        $x: $r*cos($curr-angle) - $diam/2;
        $y: $r*sin($curr-angle) - $diam/2;
        
        margin: $y $x;
        
        transform: scale(.5);
        background: url(nth($imgs, $i + 1)) 50% 50% fixed whitesmoke;
        
        &:hover {
          transform: scale(1);
          background-blend-mode: normal;
          cursor: pointer;
          
          ~ :last-child {
            background: url(nth($imgs, $i + 1)) 50% 50% fixed dimgrey;
            
            &:after { opacity: .001; }
          }
        }
      }
    }
    
    &:last-child {
      z-index: -2;
      
      &:after {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        opacity: .999;
        background: dimgrey;
        transition: opacity 2s;
        content: '';
      }
    }
    
  }
}