<div class="menu-wrap">
      <div class="item">
        <text>1960</text>
        <images>
          <img
            src="https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2014/5/20/1400606218988/kingcrimson.jpeg?width=300&quality=85&auto=format&fit=max&s=82ebca9dafaa4e2f8734e44e0941f5e8"
          />
          <img
            src="https://cdn3.pitchfork.com/albums/25229/homepage_large.c2673c8c.jpg"
          />
          <img
            src="https://cdn3.pitchfork.com/albums/25062/homepage_large.81fc4471.jpg"
          />
          <img
            src="https://cdn3.pitchfork.com/albums/25073/homepage_large.00751f8c.jpg"
          />
          <img
            src="https://cdn4.pitchfork.com/albums/25050/homepage_large.30548d86.jpg"
          />
        </images>
      </div>
      <div class="item">
        <text>1970</text>
        <images>
          <img
            src="https://cdn4.pitchfork.com/albums/21071/homepage_large.f3a3402a.jpg"
          />
          <img
            src="https://images-na.ssl-images-amazon.com/images/I/61R7gJadP7L._SX355_.jpg"
          />
          <img
            src="https://upload.wikimedia.org/wikipedia/en/6/61/Janis_Joplin-Pearl_%28album_cover%29.jpg"
          />
          <img
            src="https://upload.wikimedia.org/wikipedia/en/c/c9/Rush_2112.jpg"
          />
          <img
            src="https://images-na.ssl-images-amazon.com/images/I/51D2yn9KVZL._SX355_.jpg"
          />
        </images>
      </div>
      <div class="item">
        <text>1980</text>
        <images>
          <img
            src="https://cdn.mos.cms.futurecdn.net/ufPBb6k3xLBANAoVugXNjd-320-80.jpg"
          />
          <img
            src="https://cdn.mos.cms.futurecdn.net/q7RCvDCZRncaHSnTEHxhoh-320-80.png"
          />
          <img
            src="https://cdn.mos.cms.futurecdn.net/sPX6sFeRZvAorf7nzuR3qk-320-80.jpg"
          />
          <img
            src="https://cdn.mos.cms.futurecdn.net/7mRYAYaZk4YqWEHHPQTP7D-320-80.jpg"
          />
          <img
            src="https://cdn.mos.cms.futurecdn.net/BPwePaMLpuprmqNDzNx69W-320-80.jpg"
          />
        </images>
      </div>
      <div class="item">
        <text>1990</text>
        <images>
          <img
            src="https://e.snmc.io/i/150/w/14fe831d0dc8818f4d6e58d562eb2df2/1343251"
          />
          <img
            src="https://e.snmc.io/i/150/w/e9f1066a8dd94a54cb9ef6eb9f5d51e6/1791269"
          />
          <img
            src="https://e.snmc.io/i/150/w/64929e1f4d63b256d8b74fa176a928d3/6525223"
          />
          <img
            src="https://e.snmc.io/i/150/w/0cf644248e1153e56989d07069066bdb/7027387"
          />
          <img
            src="https://e.snmc.io/i/150/w/1cc996386fd37e5bcb128fef56fbc373/6525367"
          />
        </images>
      </div>
    </div>

@import url("https://fonts.googleapis.com/css?family=Raleway:100,300,400,600,800&display=swap");

@keyframes item-float {
  to {
    border-radius: ~"57% 43% 70% 30% / 37% 46% 54% 63%";
  }
}

@keyframes img-show {
  to {
    border-radius: 0%;
    opacity: 1;
  }
}

@delay-between: 200ms;

.delays(@n, @i: 0) when (@i =< @n) {
  &:nth-child(@{i}) {
    animation-delay: @delay-between * @i;
  }
  .delays(@n, (@i + 1));
}

body {
  background: linear-gradient(to bottom right, #001b29, #0f1010);
  overflow: hidden;
  font-family: "Raleway", sans-serif;
  height:100vh;
}
.menu-wrap {
  .item {
    position: absolute;
    padding: 10vh;
    margin: 10vh;
    animation: item-float 0.4s ease-in-out infinite alternate;
    transition: all 1s;
    width: 2vh;
    height: 2vh;
    background: #ffffff3d;
    border-radius: ~"50% 50% 20% 80% / 60% 28% 72% 40%";

    text {
      font-size: 8vh;
      font-weight: bold;
      color: white;
      margin: 0vh 7vh;
      transition: all 0.2s;
    }

    images {
      display: none;
      position: absolute;
      top: 0;
      margin: 6vh;

      img {
        height: 25vh;
        width: 25vh;
        border-radius: ~"60% 40% 67% 33% / 40% 55% 45% 60%";
        opacity: 0;
      }
    }

    &:nth-child(1) {
      top: 0;
      left: 0;
      animation-duration: 2s;
      animation-delay: -1s;
      text {
        position: absolute;
        left: 0;
      }
      images {
        left: 0;
      }
    }
    &:nth-child(2) {
      top: 0;
      right: 0;
      animation-duration: 2.5s;
      animation-delay: -1.5s;
      text {
        position: absolute;
        right: 0;
      }
      images {
        right: 0;
        flex-direction: row-reverse;
      }
    }
    &:nth-child(3) {
      bottom: 0;
      left: 0;
      animation-duration: 2.1s;
      animation-delay: -1.2s;
      text {
        position: absolute;
        left: 0;
      }
      images {
        left: 0;
      }
    }
    &:nth-child(4) {
      bottom: 0;
      right: 0;
      animation-duration: 2.2s;
      text {
        position: absolute;
        right: 0;
      }
      images {
        right: 0;
        flex-direction: row-reverse;
      }
    }

    &:hover {
      padding: 30vh;
      cursor: pointer;
      background: transparent;

      text {
        font-size: 12vh;
        mix-blend-mode: difference;
        color: #2196f3;
      }
      images {
        display: flex;
        transition: all 2s;

        img {
          animation: img-show 2s forwards;
          transition: all 0.3s;
          .delays(10);
          filter: brightness(0.3);
          &:hover {
            filter: brightness(1);
          }
        }
      }
    }
  }
}

.title {
  font-size: 10vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}