Search code examples
htmlcssimagecarouselgallery

Hide extra images in gallery slideshow

I'm trying to partially hide these images. In this example you can see that the "four" and "five" images are exceeding the list so i need to hide the parts that shouldn't be visible.

Here is what is happening: Codepen example

And here is what i'm trying to do: enter image description here

HTML code:

<div class="gallery-row">
  <ul class="list">
    <div class="list__item">
      <img class="list__thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/NYCS-bull-trans-1.svg/1024px-NYCS-bull-trans-1.svg.png">
    </div>
    //and four more images below
  </ul>
</div>

SASS code:

.gallery-row {
  width: 800px;
  background-color: blue;
  .list {
      display: flex;
      gap: 20px;
      list-style: none;
      width: 100%;
      .list__item {
        min-width: 220px;
        height: 220px;
        .list__thumbnail {
          width: 100%;
          height: 100%;
        }
      }
    }
}
Solution

  • After further investigation i could find a solution just adding overflow: hidden in "gallery-row" div tag.