How to make a slideshow on hover?

[nad.chel]

I want to make a slide-show on hover. Here’s what I wrote

<a id="basic-java" class="project-tile" href="https://codepen.io/NadChel/full/qBJYPZZ" target="_blank">
            <h3 class="project-name">Basic Java documentation</h3>
            <div class="project-img"></div>
          </a>

#basic-java .project-img {
  background: url("https://i.ibb.co/cFLkngw/2023-05-11-01-55-42.png") top/cover no-repeat;
}

#basic-java .project-img:hover {
  animation: 5s steps(3) infinite slide-show-basic-java;
}

@keyframes slide-show-basic-java {
  33% {
    background: url("https://i.ibb.co/DkKw6dQ/2023-05-11-01-57-22.png") top/cover no-repeat;
  }

  66% {
background: url("https://i.ibb.co/NSD1XCB/2023-05-11-01-59-34.png") top/cover no-repeat;
  }
}

It kind of works, but I see weird transitions from one picture to the next. I don’t want picture one transition into picture two which then transforms into picture three. I want it simple: picture one, picture two, picture three. That’s it. steps() work so well on Mozilla’s site. What was/were my mistake(s), and how do I achieve my goal?

[bappyasif]

do you have it live somewhere? happy coding

[nad.chel]

Yes, here’s my Codepen

[bappyasif]

have you tried using “animation delay” for example here im using 2 seconds delay, for first two picture it seems to be fine, but so much for 3rd picture for some reason!! animation: 4.5s 2s 1 slide-show-basic-java;