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;
}
