base(target="_blank")
ul
  li
    a(href="//unsplash.com/photos/7NBO76G5JsE")
      img(src="//images.unsplash.com/photo-1516205651411-aef33a44f7c2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c3f046fc34580ce265fdc17116bca02a&auto=format&fit=crop&w=500&q=60")
  li
    a(href="//unsplash.com/photos/alEZLDPPRBU")
      img(src="//images.unsplash.com/photo-1529688499411-262f191fe29e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e792852cdfe94c89c561ffff69047cb0&auto=format&fit=crop&w=500&q=60")
  li
    a(href="//unsplash.com/photos/L0cbdz6_eYU")
      img(src="//images.unsplash.com/photo-1509070016581-915335454d19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1315ac6ca5cc07e38a83dbacef90dce&auto=format&fit=crop&w=500&q=60")
  li
    a(href="//unsplash.com/photos/rtMiBkMCOsw")
      img(src="//images.unsplash.com/photo-1453235421161-e41b42ebba05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0de86d5a41c8dfe5939693a119ed4ae3&auto=format&fit=crop&w=500&q=60")

body {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  
}

ul {
  height:60vh;
  width:20vh;
  display:grid;
  grid-template-rows: repeat(4,
    1fr
    2fr
    1fr
  );
  overflow:hidden;
  
}

li {
  width:100%;
  height:100%;
  grid-column:1/span 1;
  
  --offsetX:50%;
}

a {
  display:block;
  width:100%;
  height:100%;
}

img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

li:first-of-type {
  grid-row:1/span 4;
  /*total=5fr*/clip-path:polygon(100% calc(20% * -1), 0 calc(20%), 0 100%, 100% calc(20%*3));
}

li:nth-of-type(2) {
  grid-row:3/span 5;
  /*total=6fr*/clip-path:polygon(100% 0, 0 calc(16.6%*2), 0 100%, 100% calc(16.6%*4));
}

li:nth-of-type(3) {
  grid-row:6/span 5;
  /*total=6fr*/clip-path:polygon(100% 0, 0 calc(16.6%*2), 0 100%, 100% calc(16.6%*4));
}

li:last-of-type {
  grid-row:-5/span 4;
  /*total=5fr*/clip-path:polygon(100% 0, 0 calc(20%*2), 0 calc(20%*6), 100% calc(20%*4))
}




/*
anim
*/
@keyframes o {
  from {transform:translate(0);}
}

li:nth-of-type(odd) a {
  transform:translate(var(--offsetX), calc(var(--offsetX) * 0.166 * -2));
  animation:o 2s;
} 

li:nth-of-type(even) a {
  transform:translate(calc(var(--offsetX)*-1), calc(var(--offsetX) * 0.166 * 2));
  animation:o 2s;
}

/*first and last hv diff slope; first=last=2/5fr regular=2/6fr; */

li:first-of-type a {
  transform:translate(var(--offsetX), calc(var(--offsetX) * 0.200 * -2));
} 

li:last-of-type a {
  transform:translate(calc(var(--offsetX) * -1), calc(var(--offsetX) * 0.200 * 2));
}

img {
  animation:blr 2s;
  filter:blur(10px);
} @keyframes blr {
  from {filter:blur(0)}
}




/*
hover & vfx
*/
li {
  transition:opacity 0.3s;
}
li a {
  transition:all 0.15s;
}
li:hover a {
  transition:transform 0.3s;
  transform:translate(0);
}

ul:hover li {
  opacity:0.1;
}
ul:hover li:hover {
  opacity:1;
  transition:clip-path 0.4s 0.3s;
  clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);
  z-index:10;
}

img {
  filter:blur(10px);
  transition:filter 0.7s;
}
li:hover img {
  filter:blur(0);
}