Having issue with text on scrolling flexbox image gallery

Having issue with text on scrolling flexbox image gallery
0
#1

Hey there. I’m having a display problem with an image gallery pen I’m working on. I have text under my images which is not scrolling properly. There is a hover state which transforms image/text size which I think my be the culprit. Once this hover is activated, only the text on the transformed image scrolls. Can anyone shed some light on this? I can’t post a link to my code pen, so my styling code is below. Thanks!

html, body {
  width: 100%;
  height: 100%;
  background: black;
    counter-reset: section;
  height: 100vh;
  justify-content: center;
}


h2::before {
  counter-increment: section;
  content: "Image " counter(section) " ";
}

  .gallery-row {
  display: flex;
    overflow-x: auto;
  padding: 2vh;
   
}
.item {
  display: block;
  margin: 5px;
  transition: transform 200ms ease-out;
  object-fit: cover;
  padding: 20px 0; 
     align-content: center;
}
.item-image {
  width: 30%;
}
.item:hover {
  transform: scale(1.02);
}
.line {
  display: flex;
  width: 383px;
  margin: 0 5px;
  border-top: 1px solid white;
  position: absolute;
  color: white;
  font-family: roboto;
}
#2

Commented out the hover state, added an overflow to the text. Now it looks like these elements are on separate layers though they are in the same

. How do I get them to scroll together?
#3

Can you provide a link? You don’t have to post full link only part of it like https -> ttps…

#4

Sure. https://codepen.io/motleyrue/pen/WWydmQ

A found a solution of sorts but I would still like to troubleshoot the original issue. :slight_smile:

#5

I am taking a look but don’t understand what you mean by not scrolling properly. Can you explain more?