div#carousel { 
    perspective: 1200px; 
    background: transparent;  
    font-size:0; 
    margin-top: 2rem;
    margin-bottom: 3rem; 
    height: 450px;
  }
  figure#spinner { 
    transform-style: preserve-3d; 
    height: 70%; 
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 30% -300px; 
    transition: 1s; 
  } 
  figure#spinner figure { 
    width: 80%; 
    position: absolute; 
    transform-origin: 50% 30% -300px;
    outline:1px solid transparent; 
    overflow: hidden;
    transition: 1s;
    left: 10%;
    opacity: 0.3;
  }
 
  figure#spinner figure img { 
    width: 100%; 
    margin-bottom: 20%;
  } 
  figcaption { 
    position: absolute; 
    width: 100%; 
    padding: .3rem; 
    z-index: 2; 
    font-size: large; 
    background: rgba(0, 0, 0, 0); 
    bottom: 0; 
    visibility: hidden;
    color: #515151;
    font-weight: bold;
    text-align: center;
  }
   
  div#carousel ~ span { 
    color: #515151; 
    margin: 5%; 
    display: inline-block; 
    text-decoration: none; 
    font-size: 2rem; 
    transition: 0.6s color; 
    position: relative; 
    margin-top: -6rem; 
    border-bottom: none; 
    line-height: 0; 
  }
  div#carousel ~ span:hover { 
    color: #515151; 
    cursor: pointer; 
  }

  .current{
      opacity: 1 !important;
  }
  .current figcaption{
      visibility: visible;
  }