<div card-stack>

  <input id="card-0" name="card-set" type="radio" checked/>
  <div card>
    <div class="content">
      <h2>Steps to Frontend Success</h2>
      <p>A life well lived.</p>
      <label for="card-1">Learn More</label>
    </div>
  </div>

  <input id="card-1" name="card-set" type="radio"/>
  <div card>
    <div class="content">
      <h2>Step 1</h2>
      <p>Write some markup.</p>
      <label for="card-2">Go to 2</label>
    </div>
  </div>

  <input id="card-2" name="card-set" type="radio" />
  <div card>
    <div class="content">
      <h2>Step 2</h2>
      <p>Write some CSS.</p>
      <label for="card-3">Go to 3</label>
    </div>
  </div>
 
  <input id="card-3" name="card-set" type="radio" />
  <div card>
    <div class="content">
      <h2>Step 3</h2>
      <p>Look up stuff on MDN.</p>
      <label for="card-4">Go to 4</label>
    </div>
  </div>
 
  <input id="card-4" name="card-set" type="radio" />
  <div card>
    <div class="content">
      <h2>Step 4</h2>
      <p>Switch Pre-Processors. Because things are starting to get complicated.</p>
      <label for="card-5">Go to 5</label>
    </div>
  </div>
 
  <input id="card-5" name="card-set" type="radio" />
  <div card>
    <div class="content">
      <h2>Step 5</h2>
      <p>Thow out your work start over, becasuse this time you definately choose the right framework.</p>
      <label for="card-6">Go to 6</label>
    </div>
  </div>
 
  <input id="card-6" name="card-set" type="radio" />
  <div card>
    <div class="content">
      <h2>Step 6</h2>
      <p>Break down and cry.</p>
      <label for="card-7">Go to 7</label>
    </div>
  </div>
 
  <input id="card-7" name="card-set" type="radio" />
  <div card>
    <div class="content">
      <h2>Step 7</h2>
      <p>Curl up in fetal position.</p>
      <label for="card-8">Go to 8</label>
    </div>
  </div>
 
  <input id="card-8" name="card-set" type="radio" />
  <div card>
    <div class="content">
      <h2>Step 8</h2>
      <p>Write more CSS to cover up your already bad CSS.</p>
      <label for="card-0">Start Over</label>
    </div>
  </div>
  
</div>
$use-filters: true;

[card-stack] {
  will-change: transform;
  position: relative;
  width: 20rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
}

[name="card-set"] {
  display: none;
  &:checked {
    //Card 1
    + [card] {
      display: flex;
      opacity: 1;
      @if ($use-filters) {
        filter: blur(0);
      }
      transform: translateY(0) scale(1);
      transition: transform 1s, opacity 1s, filter .25s;
      transition-delay: .3s;
      z-index: 0;
      //card 2
      ~ [card] {
        z-index: -1;
        display: flex;
        opacity: .9;
        @if ($use-filters) {
          filter: blur(1px);
        }
        transform: translateY(1.2rem) scale(.95);
        transition: transform 1.5s, opacity 1.5s, filter .5s;
        transition-delay: .4s;
        //card 3
        ~ [card] {
          z-index: -2;
          display: flex;
          opacity: .7;
          @if ($use-filters) {
            filter: blur(2px);
          }
          transform: translateY(2.4rem) scale(.9);
          transition: transform 2s, opacity 2s, filter 1.5s;
          transition-delay: .5s;
          //card 4... you know what... I shouldn't have to explain anymore.
          ~ [card] {
            z-index: -3;
            display: flex;
            opacity: .5;
            @if ($use-filters) {
              filter: blur(3px);
            }
            transform: translateY(3.6rem) scale(.85);
            transition: transform 2.5s, opacity 2.5s, filter 2s;
            transition-delay: .7s;
            //card 5+
            ~ [card] {
              z-index: -4;
              display: flex;
              opacity: 0;
              @if ($use-filters) {
                filter: blur(4px);
              }
              transform: translateY(5rem) scale(.8);
              transition: transform 3s, opacity 3s, filter 2.5s;
              transition-delay: .8s;
            }
          }
        }
      }
    }
  }
}

[card] {
  display: flex;
  will-change: filter opacity transform;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: white;
  opacity: 0;
  transform: translateY(0) translateX(calc(-100% - 1rem)) scale(1);
  transition: transform .5s, opacity .2s .3s, filter .1s;
  transition-timing-function: ease-in;
  box-shadow: 0 .2rem 0 rgba(black, .2);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  z-index: 1;
  min-height: 50vh;
  &::before {
    content: '';
    display: block;
    padding-bottom: 130%;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 2rem;
    text-align: center;
  }
  label {
    color: white;
    display: inline-block;
    padding: 1rem 2rem;
    margin: 1rem;
    background-color: #47cf73;
    border-radius: 200px;
    user-select: none;
    &:hover {
      background-color: lighten(#47cf73, 10%);
    }
    &:active {
      background-color: darken(#47cf73, 20%);
    }
  }
}
//cool stuff ends here.
body {
  background: darken(#47cf73, 20%);
}
View Compiled 
//No JS here.
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.