base(target='_blank')
.g
  a(href='https://unsplash.com/photos/4dY4gxT9WOA') 1
    img(src='https://images.unsplash.com/photo-1559074042-cf0d536b0907?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2002&q=80')
  a(href='https://unsplash.com/photos/g6rwLpccO6k') 2
    img(src='https://images.unsplash.com/photo-1541687278731-4d12156e3690?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')
  a(href='https://unsplash.com/photos/8Q4pW1n11kc') 3
    img(src='https://images.unsplash.com/photo-1553868756-0a90dd2023e7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80')
  a(href='https://unsplash.com/photos/GfAC-LoRqMU') 4
    img(src='https://images.unsplash.com/photo-1553870587-ffe7752a5b1f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1330&q=80')

article
  h1 Lorem ipsum dolor sit amet, consectetur adipiscing elit 
  p Duis tincidunt odio quis orci feugiat ultrices. Aliquam nec congue libero. Cras congue tellus consequat tortor lacinia fermentum eu placerat felis. Fusce condimentum ultrices pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim gravida enim. In sodales dolor sed nisl sagittis, in vehicula tellus rhoncus. Quisque in malesuada arcu. 

body {
  min-height:100vh;
  display:grid;
  place-content:start center;
  background:linear-gradient(#fff,#aaa,#fff)
}

article {
  position:absolute; top:20vh; left:30vw;
  width:40vw;
  color:#333;
  h1, p {
    margin:10px;
  }
  h1 {
    font-size:1.2rem
  }
  p {
    font-size:0.9rem;
    line-height:1.4;
  }
}


.g {
  width:auto; // no anim
  height:5vh;
  display:grid;
  grid-auto-flow:column;
  grid-auto-rows:10vh;
  place-content:start center;
  z-index:1;
  transition:all 1s;
  position:relative;
  top:5vh;
  &:hover {
    background:linear-gradient(transparent, hsla(0,0%,100%,0.5), transparent);
    height:95vh;
    width:50vw;
  }
 
  a {
    font:0.8em monospace;
    position:static;
    display:block;
    width:5ch;
    height:5ch;
    display:grid; place-content:center;
    background:hsla(0,0%,100%,0.5); color:#333;
    text-decoration:none;
    border-bottom:thin solid red;
    box-sizing:border-box;
    
    &:hover {
      background:hsla(0,0%,0%,0.5);
      color:#eee;
      border-bottom:0 none;
    }
  
    img {
      display:block;
      position:absolute; top:0; left:0; z-index:-1;
      width:100%;
      height:85vh;
      object-fit:cover;
      object-position:center;
      clip-path:polygon(
        50% 0,
        50% 0,
        50% 100%,
        50% 100%,
        50% 0,
        50% 0,
        50% 100%,
        50% 100%
      );
      transition:clip-path 0.3s ease-in;
    }
    
    &:hover img, img:hover {
      clip-path:polygon(
        50% 0,
        0 0,
        0 100%,
        50% 100%,
        50% 0,
        100% 0,
        100% 100%,
        50% 100%
      );
    }
  }
}


// fx 
article {transition:filter 0.5s}
.g:hover + article {
  filter:blur(3px)
}