Hover effect on scrolling photos - Can it work when mouse is fixed and images passes under?

Question

I created a scroll from snippets I have found here Making horizontal scroll with images infinite with no break CSS . Works fine, but I added a hover effect on my images. works great too. But I wonder if I could make it work when mouse is over a div and the div passes under through the animation... So that the user can leave mouse alone and read the names one after the other.

Alternativly if its not possible I would like that when one of the images passes in the center of the screen it reveals its name with some kind on "when you pass under this fixed div" effect.

Here is my example code and a link to a working snippet.

CSS :

.m-scroll {
  overflow: hidden;
  white-space: nowrap;
  animation: scrollText 300s infinite linear;
  margin: 0;
  font-size: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: fit-content;
}

.header {
  background-color: #223654;
  color: #223654;
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
  background-size: cover;
  position: fixed;
  width: 100%;
  top: 34px;
  height: auto;
  z-index: 21;
  display: block;
}

.scroll {
  position: relative;
  width: 100%;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  margin: 0 0px;
  padding: 0;
  border: 2px solid #223654;
}

span.insidescroller {
  display: inline-block;
  width: fit-content;
  margin: 0 0px;
  padding: 0;
  color: white;
}

@keyframes scrollText {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-90%);
  }
}

.containeur-flex-row-accueil {
  display: grid;
  gap: 0px;
  grid-auto-flow: column;
  grid-template-rows: 1fr;
  overflow-x: auto;
  overflow-y: visible;
}

.img-index-photo {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 2px solid #223654;
  object-fit: cover;
  box-sizing: border-box;
  aspect-ratio: 1/1;
}

.container-img-strip {
  width: 100px;
  height: 100px;
  position: relative;
}

.container-img-strip:hover .overlay-img-accueil {
  opacity: 1;
}

.img-scroll-accueil {
  width: 100px;
  height: 100px;
  margin: 0;
  border: 2px solid #223654;
  object-fit: cover;
  box-sizing: border-box;
  aspect-ratio: 1/1;
}

.overlay-img-accueil {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: rgba(34, 54, 84, 0.7);
}

.text-overlay-accueil {
  color: white;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  user-select: none;
}

HTML :

<div id="header-logo" class="header">
  <div class="scroll">
    <div class="m-scroll">
      <span class="insidescroller">
        <div class="containeur-flex-row-accueil">
          <script>  
 /* This is PHP genrated in real site */
            j = 1;
            for (let i = 1; i <= 20; i++) {
              for (let i = 1; i <= 10; i++) {
                j++;
                document.write(`
<a href="#">
   <div class="container-img-strip">
      <img class="img-scroll-accueil" src="https://viogene.net/fixed-images/mush-${i}.jpg">
      <div class="overlay-img-accueil">
        <div class="text-overlay-accueil">Mushroom #${j}<br>name
         </div>
      </div>
   </div>
</a>
       `);
              }
            }
            
 /* End of PHP genrated in real site */
          </script>
        </div>
      </span>
    </div>
  </div>

</div>

Here is a working snippet :

https://codepen.io/Alex-Vio/pen/KKEGENV