'Image slideshow not transitioning correctly

I am creating a slideshow with images and text, but the slide starts then starts overlapping and then turns black. Here's a link as an example: https://app.hubspot.com/design-previewer/2446169/modules/66334288661. I am new to code and am unsure what's going on. I think in the cycleImages is where something went wrong, but I am not sure. I followed a video to help, but mine still does the overlapping and then just a black screen.

Here is my CSS code:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  font-size: 10px;
}

body{
  background-color: #000;
}

.slideshow{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.slideshow-item{
  width: inherit;
  height: inherit;
  position: absolute;
  opacity: 0;
  animation: cycleImages 31s infinite;
}

.slideshow-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: zoom 31s infinite;
}

.slideshow-item:nth-child(1),
.slideshow-item:nth-child(1) img{
  animation-delay: 0s;
}

.slideshow-item:nth-child(2),
.slideshow-item:nth-child(2) img{
  animation-delay: 10s;
}

.slideshow-item:nth-child(3),
.slideshow-item:nth-child(3) img{
  animation-delay: 20s;
}
  
.slideshow-item:nth-child(4),
.slideshow-item:nth-child(4) img{
  animation-delay: 30s;
} 

.slideshow-item-text{
  max-width: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,.8);
  color: #fff;
  padding: 10rem 5rem;
}

.slideshow-item-text h5{
  font-size: 5rem;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 2.5rem;
}

.slideshow-item-text p{
  font-size: 1.6rem;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 300;
}

@keyframes cycleImages {
  25%{
    opacity: 1;
  }
  40%{
    opacity: 0;
  }
}
  
@keyframes zoom {
  100%{
    transform: scale(1.3);
  }
}

@media screen and (max-width: 1000px) {
  .slideshow-item-text{
  max-width: 70%;
  padding: 5rem 1rem;
}
  .slideshow-item-text h5{
    font-size: 4rem;
  }
}

@media screen and (max-width: 767px) {
  .slideshow-item-text{
    max-width: 100%;
    padding: 2rem;
    top: initial;
    bottom: 0;
    transform: initial;

}
  .slideshow-item-text h5{
    font-size: 3rem;
  }
}

.slideshow-item-text p{
  font-size: 1.4rem;
}

Here is my HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>Slider</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
   <div class="slideshow">
     <div class="slideshow-item">
       <img src="https://f.hubspotusercontent10.net/hubfs/2446169/020222-024.jpg" alt="">
       <div class="slideshow-item-text">
         <h5>Will you be a new student this spring?</h5>
         <a href="https://www.hocking.edu/quickstart">Register for QuickStart now</a>
       </div>
     </div>
  
     <div class="slideshow">
     <div class="slideshow-item">
       <img src="https://f.hubspotusercontent10.net/hubfs/2446169/FAFSA_computer.jpg" alt="">
       <div class="slideshow-item-text">
         <h5>Need help with the FAFSA? Sign up for a free help session!</h5>
         <a href="https://www.hocking.edu/fafsa-workshop">Learn more</a>
       </div>
     </div>
    
       <div class="slideshow">
     <div class="slideshow-item">
       <img src="https://f.hubspotusercontent10.net/hubfs/2446169/Elle%20King%20(1).png" alt="">
       <div class="slideshow-item-text">
         <h5>Black Diamond Music Festival | June 10-12</h5>
         <a href="https://www.blackdiamondmusicfestival.com/">See the Lineup</a>
       </div>
     </div>
    
         <div class="slideshow">
     <div class="slideshow-item">
       <img src="https://f.hubspotusercontent10.net/hubfs/2446169/0924-042.jpg" alt="">
       <div class="slideshow-item-text">
         <h5>Job-ready training at the Fairfield County Workforce Center</h5>
        <a href="https://www.hocking.edu/fairfield-county-workforce-center">Click here for more information</a>
       </div>
     </div>
   
      
    
  </body>
</html>
htmlcssslider


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions