JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<div class="image-container">
  <figure class="lead-image">
    <img src="https://picsum.photos/400/300/" alt="">
  </figure>
  <figure>
    <img src="https://picsum.photos/400/301/" alt="">
  </figure>
  <figure>
    <img src="https://picsum.photos/400/302/" alt="">
  </figure>
</div>

<!-- https://tympanus.net/Development/CardStackEffects/ -->

SCSS

.image-container {
  position: relative;
  padding: 40px;
  background: red;
  display: block;
  width: 100%;
  height: 100%;
  
  &:hover {
    figure {      
      animation: 
        shuffle-1st 0.5s 2.25s 1 forwards;
        
      &:nth-child(2n+2){
        animation: 
          straighten-2nd 0.5s 1 forwards,
          shuffle-2nd 0.5s 0.75s 1 forwards;
      }
      
      &:nth-child(2n+3){
        animation: 
          straighten-3rd 0.5s 1 forwards,
          shuffle-3rd 0.5s 1.5s 1 forwards;
      }
    }
  }
  
  figure {
    position: absolute;
    top: 35px;
    left: 40px;
    padding: 0;
    margin: 0;
    display: inline-block;
    z-index: 3;
    box-shadow: 0 5px 20px 0 rgba(34,34,34,.2);
    border: 3px solid white;
    
    &:nth-child(2n+2){
      top:40px;
      z-index: 2;
      transform: rotate(-4deg);
      animation: 
        rotate-2nd 0.5s;
    }
    
    &:nth-child(2n+3){
      top:40px;
      z-index: 1;
      transform: rotate(5deg);
      animation: rotate-3rd 0.5s;
    }
    
    &.lead-image {
      position: relative;
      top: 0;
      left: 0;
      transform: rotate(0deg);
      z-index: 4;
    }    
    
    img {
      position: relative;
      vertical-align: middle;
    }
  }
}

@keyframes shuffle-1st {
  0% {
    top: 0px; 
    z-index: 2;
  }
  50% {
    top: -300px;
  }
  100% {
    z-index: 5;
  }
}

@keyframes shuffle-2nd {
  0% {
    top: 0px; 
    z-index: 2;
  }
  50% {
    top: -300px;
  }
  100% {
    z-index: 4;
  }
}

@keyframes shuffle-3rd {
  0% {
    top: 0px; 
    z-index: 1;
  }
  50% {
    top: -300px;
  }
  100% {
    z-index: 4;
  }
}

@keyframes straighten-2nd {
    from {transform: rotate(-4deg);}
    to {transform: rotate(0deg);}
}

@keyframes rotate-2nd {
    from {transform: rotate(0deg);}
    to {transform: rotate(-4deg);}
}

@keyframes straighten-3rd {
    from {transform: rotate(5deg);}
    to {transform: rotate(0deg);}
}

@keyframes rotate-3rd {
    from {transform: rotate(0deg);}
    to...