<div class="wrapper">
  <img src="https://img-fotki.yandex.ru/get/5905/yoksel.5e/0_4dcea_dc645b78_L" alt="">
  <img src="https://img-fotki.yandex.ru/get/5905/yoksel.5e/0_4dcea_dc645b78_L" alt="">
  <img src="https://img-fotki.yandex.ru/get/5905/yoksel.5e/0_4dcea_dc645b78_L" alt="">
  <img src="https://img-fotki.yandex.ru/get/5905/yoksel.5e/0_4dcea_dc645b78_L" alt="">
  <img src="https://img-fotki.yandex.ru/get/5905/yoksel.5e/0_4dcea_dc645b78_L" alt="">
  <img src="https://img-fotki.yandex.ru/get/5905/yoksel.5e/0_4dcea_dc645b78_L" alt="">
  <img src="https://img-fotki.yandex.ru/get/5905/yoksel.5e/0_4dcea_dc645b78_L" alt="">
  <img src="https://img-fotki.yandex.ru/get/5905/yoksel.5e/0_4dcea_dc645b78_L" alt="">
  <img src="https://img-fotki.yandex.ru/get/5905/yoksel.5e/0_4dcea_dc645b78_L" alt="">
  <img src="https://img-fotki.yandex.ru/get/5905/yoksel.5e/0_4dcea_dc645b78_L" alt="">
</div> 

HTML, BODY {
  height: 100%;
  font-size: 16px;
  line-height: 1.5;
  font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
}

BODY {
  overflow: hidden;
  background-color: #fff;
  
  background-size: .75em 100%, 100% 100%;
  background-attachment: fixed;
  display: flex;
  align-items: center;
}

.wrapper {
  position: relative;
  flex-grow: 1;
  margin: auto;
  max-width: 1200px;
  max-height: 1200px;
  
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 2vmin;
  justify-items: center;
  align-items: center;
}

IMG {
  z-index: 1;
  grid-column: span 2;
  max-width: 100%;
  margin-bottom: -52%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: scale(1);
  transition: all .25s;
  
  &:nth-child(7n + 1) {
    grid-column: 2 / span 2;
  }
  
  &:hover {
    z-index: 2;
    transform: scale(2);
  }
}