body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(-225deg, #65379B 10%, #886AEA 53%, #6457C6 100%);
  }
  
  .cards{
    position: relative;
    width: 300px;
    height: 340px;
    margin: 480px 0 0 100px;
    transform: rotate(-25deg) skew(25deg) scale(0.8);
    transition: 0.5s;
  }

  .cards img {
    position: absolute;
    width: 100%;
    transition: .5s;
  }

  .cards:hover img:nth-child(6) {
    transform: translate(180px, -180px);
    opacity: 1;
  }

  .cards:hover img:nth-child(5) {
    transform: translate(160px, -160px);
    opacity: .9;
  }
  
  .cards:hover img:nth-child(4) {
    transform: translate(140px, -140px);
    opacity: .7;
  }
  
  .cards:hover img:nth-child(3) {
    transform: translate(120px, -120px);
    opacity: .5;
  }
  
  .cards:hover img:nth-child(2) {
    transform: translate(100px, -100px);
    opacity: .3;
  }
  
  .cards:hover img:nth-child(1) {
    transform: translate(80px, -80px);
    opacity: .1;
  }