title: CSS carousel only shows last picture over and over
body: <p>I am trying to implement <a href="https://codepen.io/tianyili/pen/qBEdeoy" rel="nofollow noreferrer">this</a> carousel in my project. When I put my HTML into the codepen, it works fine, but when I put the css in my project it will only show the 5th card on repeat. I think it is placing all the cards on top of each other and cycling them all at once with card 5 on top.</p>
  <p>I have changed a little bit of the css for the card carousel, but nothing that should be breaking it. Is it my card styles that are causing the issue? Something else?</p>
  <p>Thank you for any help you can provide!</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;card-ctn&quot;&gt;
      &lt;div class=&quot;card&quot; &gt;
          &lt;img src= &quot;http://books.google.com/books/content?id=1Kw1elu9QjAC&amp;printsec=frontcover&amp;img=1&amp;zoom=1&amp;edge=curl&amp;source=gbs_api&quot; &gt;
          &lt;div class=&quot;descriptions&quot;&gt;
          &lt;h5 class=&quot;title&quot;&gt;Paint It Black&lt;/h5&gt;
          &lt;p class=&quot;card-text&quot;&gt;Janet Fitch&lt;/p&gt;
          &lt;p class=&quot;desc&quot;&gt;
              &quot;some text&quot;
          &lt;/p&gt;
          &lt;div class=&quot;hide&quot;&gt;075956812X&lt;/div&gt;
          &lt;button (click)=&quot;addToCart($event)&quot; class=&quot;btn cart&quot;&gt;Cart&lt;/button&gt;
          &lt;button (click)=&quot;addToWishlist($event)&quot; class=&quot;btn wish&quot;&gt;Wishlist&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card&quot; &gt;
          &lt;img src= &quot;http://books.google.com/books/content?id=g0OZtYOW1v8C&amp;printsec=frontcover&amp;img=1&amp;zoom=1&amp;source=gbs_api &quot; &gt;
          &lt;div class=&quot;descriptions&quot;&gt;
          &lt;h5 class=&quot;title&quot;&gt; A Storm of Swords Complete Edition (Two in One) (A Song of Ice and Fire, Book 3)&lt;/h5&gt;
          &lt;p class=&quot;card-text&quot;&gt;George R. R. Martin&lt;/p&gt;
          &lt;p class=&quot;desc&quot;&gt;
              some text
          &lt;/p&gt;
          &lt;div class=&quot;hide&quot;&gt;9780007426232&lt;/div&gt;
          &lt;button (click)=&quot;addToCart($event)&quot; class=&quot;btn cart&quot;&gt;Cart&lt;/button&gt;
          &lt;button (click)=&quot;addToWishlist($event)&quot; class=&quot;btn wish&quot;&gt;Wishlist&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card&quot; &gt;
          &lt;img src= &quot;http://books.google.com/books/content?id=FKzLugEACAAJ&amp;printsec=frontcover&amp;img=1&amp;zoom=1&amp;source=gbs_api&quot; &gt;
          &lt;div class=&quot;descriptions&quot;&gt;
          &lt;h5 class=&quot;title&quot;&gt; 1066&lt;/h5&gt;
          &lt;p class=&quot;card-text&quot;&gt;David Armine Howarth&lt;/p&gt;
          &lt;p class=&quot;desc&quot;&gt;
              some text
          &lt;/p&gt;
          &lt;div class=&quot;hide&quot;&gt;0140058508&lt;/div&gt;
          &lt;button (click)=&quot;addToCart($event)&quot; class=&quot;btn cart&quot;&gt;Cart&lt;/button&gt;
          &lt;button (click)=&quot;addToWishlist($event)&quot; class=&quot;btn wish&quot;&gt;Wishlist&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card&quot; &gt;
          &lt;img src= &quot;http://books.google.com/books/content?id=zV4PuFn5gvoC&amp;printsec=frontcover&amp;img=1&amp;zoom=1&amp;edge=curl&amp;source=gbs_api&quot; &gt;
          &lt;div class=&quot;descriptions&quot;&gt;
          &lt;h5 class=&quot;title&quot;&gt;Sex at Dawn&lt;/h5&gt;
          &lt;p class=&quot;card-text&quot;&gt;Christopher Ryan,Cacilda Jetha&lt;/p&gt;
          &lt;p class=&quot;desc&quot;&gt;
              Some Text
          &lt;/p&gt;
          &lt;div class=&quot;hide&quot;&gt;075956812X&lt;/div&gt;
          &lt;button (click)=&quot;addToCart($event)&quot; class=&quot;btn cart&quot;&gt;Cart&lt;/button&gt;
          &lt;button (click)=&quot;addToWishlist($event)&quot; class=&quot;btn wish&quot;&gt;Wishlist&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card&quot; &gt;
          &lt;img src= &quot;http://books.google.com/books/content?id=XfFvDwAAQBAJ&amp;printsec=frontcover&amp;img=1&amp;zoom=1&amp;edge=curl&amp;source=gbs_api&quot; &gt;
          &lt;div class=&quot;descriptions&quot;&gt;
              &lt;h5 class=&quot;title&quot;&gt;Atomic Habits&lt;/h5&gt;
              &lt;p class=&quot;card-text&quot;&gt;James Clear&lt;/p&gt;
              &lt;p class=&quot;desc&quot;&gt;
                  Some Text
              &lt;/p&gt;
              &lt;div class=&quot;hide&quot;&gt;9780735211292&lt;/div&gt;
              &lt;button (click)=&quot;addToCart($event)&quot; class=&quot;btn cart&quot;&gt;Cart&lt;/button&gt;
              &lt;button (click)=&quot;addToWishlist($event)&quot; class=&quot;btn wish&quot;&gt;Wishlist&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>CSS (which I changed a little bit)</p>
  <pre><code>
  /* *************************
         Card Carousel
  **************************** */
  @keyframes display {
    0% {
      transform: translateX(300px);
      opacity: 0;
    }
    20% {
      transform: translateX(0);
      opacity: 1;
    }
    80% {
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateX(-300px);
      opacity: 0;
    }
  }
  
  .card-ctn {
    position: relative;
    height: 400px;
    margin-bottom: -30px;
    overflow: hidden;
    margin-top: -30px;
  }
  
  .card-ctn &gt; .card {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    animation: display 8s infinite;
  }
  
  .card:nth-child(2) {
    animation-delay: 2s;
  }
  .card:nth-child(3) {
    animation-delay: 4s;
  }
  .card:nth-child(4) {
    animation-delay: 6s;
  }
  .card:nth-child(5) {
    animation-delay: 8s;
  }
  
  /* *************************
        End Card Carousel
  **************************** */
  
  /* *************************
        Card Styles
  **************************** */
  .card {
    flex: 1;
    flex-basis: 300px;
    flex-grow: 0;
    height: 300px;
    width: 200px;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.5);
    transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
    overflow: hidden;
    position: relative;
    margin-top: 38px;
    margin-left: 20px;
  }
  .card img {
    width: 100%;
    height: 100%;
    transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  }
  .descriptions {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transition: all 0.7s ease-in-out;
    padding: 20px;
    box-sizing: border-box;
    clip-path: circle(0% at 100% 100%);
  }
  .card:hover .descriptions {
    left: 0px;
    transition: all 0.7s ease-in-out;
    clip-path: circle(75%);
  }
  .card:hover {
    transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
    transform: scale(0.97);
  }
  .card:hover img {
    transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
    transform: scale(1.6) rotate(20deg);
    filter: blur(3px);
  }
  .card h5 {
    color: white;
    text-shadow: 0 0 5px black;
    letter-spacing: 1px;
    margin: 0px;
    margin-top: -20px;
    height: 45px;
    overflow: hidden;
  }
  
  .card p {
    color: white;
    text-shadow: 0 0 5px black;
    line-height: 24px;
    font-size: 15px;
  }
  .card-text {
    height: 47px;
  }
  .card:hover .desc {
    background: rgba(54, 54, 54, 0.356);
    border-radius: 10px 0 0 10px;
  }
  .desc {
    height: 100px;
    height: 147px;
    width: 100%;
    overflow-y: scroll;
    padding-right: 40px;
    margin-bottom: 20px;
    margin-top: -12px;
    box-sizing: content-box;
    mix-blend-mode: difference;
  }
  
  .card button {
    position: absolute;
    bottom: 15px;
    width: 70px;
    height: 30px;
    cursor: pointer;
    border-style: none;
    background-color: #04a304;
    color: #fff;
    font-size: 13px;
    outline: none;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
    transition: all 0.5s ease-in-out;
  }
  .wish {
    right: 10px;
  }
  .cart {
    left: 10px;
  }
  
  .card button:hover {
    transform: scale(0.95) translateX(-5px);
    transition: all 0.5s ease-in-out;
  }
  
  .hide {
    opacity: 0;
  }
  </code></pre>