<div class="wrap">
  <div class="inner">
    <img class="img" src="https://picsum.photos/id/1012/600/400" alt="logo">
    <p class="overlay"><b>Slide 1:</b> A picture of something or other.</p>
  </div>
  <div class="inner">
    <img class="img" src="https://picsum.photos/id/1013/800/300" alt="logo">
    <p class="overlay"><b>Slide 2:</b> Another pretty picture for you.</p>
  </div>
  <div class="inner">
    <img class="img" src="https://picsum.photos/id/1014/900/350" alt="logo">
    <p class="overlay"><b>Slide 3:</b> Something that has too much text to fit on top of the image and so what happens then eh?. Something that has too much text to fit on top of the image and so what happens then eh?. Something that has too much text to fit on top of the image and so what happens then eh?. </p>
  </div>
  <div class="inner">
    <img class="img" src="https://picsum.photos/id/1015/700/400" alt="logo">
    <p class="overlay"><b>Slide 4:</b>The last Picture in this convoluted sequence.</p>
  </div>
</div>

html,
body {
  margin: 0;
  padding: 0;
}

.wrap {
  min-height: 100vh;
  background: red;
  display: grid;
  grid-template-areas: "middle";
}
.inner {
  margin: auto;
  border: 5px solid #000;
  position: relative;
  grid-area:middle;
}
.img {
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100vh;
  object-fit: cover;
  height: auto;
  box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.3);
}
.overlay {
  display: grid;
  margin: auto;
  font-size: clamp(0.5em, 4vw, 3em);
  position: absolute;
  inset: 0 0 0 0;
  overflow: auto;
  place-items: center;
  place-content: center;
  text-align: center;
  padding: 1rem;
  color:#fff;
  background: rgba(0,0,0,0.2);
  text-shadow:2px 2px rgba(0,0,0,0.5);
}

/* animation */

.inner{transform:scale(0);}
.inner:nth-of-type(1) {animation:fade1 20s linear infinite}
.inner:nth-of-type(2){animation:fade2 20s linear infinite}
.inner:nth-of-type(3){animation:fade3 20s linear infinite}
.inner:nth-of-type(4){animation:fade4 20s linear infinite}

@keyframes fade1 {
  0%{transform:scale(0)}
  12.5%{transform:scale(1)}
  25%{transform:scale(0)}
}
@keyframes fade2 {
  22%{transform:scale(0)}
  35.5%{transform:scale(1)}
  53%{transform:scale(0)}
}
@keyframes fade3 {
  47%{transform:scale(0)}
  62.5%{transform:scale(1)}
  78%{transform:scale(0)}
}
@keyframes fade4 {
  72%{transform:scale(0)}
  87.5%{transform:scale(1)}
  100%{transform:scale(0)}
}
.wrap:has(.inner:hover) .inner{animation-play-state:paused;}
/* if you're wondering why I just didnt do .inner:hover to pause animation then that's because all the other animations would still carry on and get mismatched*/


@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */
  .inner{animation-duration:0s !important;transform:scale(1);grid-area:auto}
}