<div class="imagesWrapper"></div>

body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: #222;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  .imagesWrapper {
    position: relative;
    transform: translateX(-80px);
    
    .imageWrapper {
      position: absolute;
      height: 150px;
      width: 150px;
      border: 5px solid white;
      background-color: white;
      box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: cover;
      transition: all 0.5s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(45deg);
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      
      &:nth-child(1) {
        top: -470px;
      }
      
      &:nth-child(2) {
        top: -235px;
        right: -396px;
      }
      
      &:nth-child(3) {
        top: -235px;
        left: -117px;
      }
      
      &:nth-child(4) {
        left: -310px;
      }
      
      &:nth-child(6) {
        right: -633px;
      }
      
      &:nth-child(7) {
        top: 235px;
        right: -396px;
      }
      
      &:nth-child(8) {
        top: 235px;
        left: -117px;
      }
      
      &:nth-child(9) {
        top: 471px;
      }

      &:hover {
        transform: scale(1.1) rotate(45deg);
        box-shadow: 0 20px 25px 0 rgba(0, 0, 0, 0.8);
        z-index: 3;

        img {
          filter: blur(0) grayscale(0);
        }
      }

      img {
        width: 320px;
        height: auto;
        transform: rotate(-45deg);
        filter: blur(2px) grayscale(0.75);
        transition: all 0.5s ease-in-out;
      }
    }
  }
}

const images = [
  "https://images.unsplash.com/photo-1544568100-847a948585b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1517423440428-a5a00ad493e8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1535930891776-0c2dfb7fda1a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
  "https://images.unsplash.com/photo-1504595403659-9088ce801e29?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
];

$(document).ready(function() {
  images.forEach(function(image) {
    const template = `<div class="imageWrapper"><img src='${image}' /></div>`;
    $(".imagesWrapper").append(template);
  });
});