'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%;
        }
      }
    }
}
htmlcssimagecarouselgallery


Solution 1:[1]

Add an overflow of hidden to your .gallery-row class.

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

Here is a simpler implementation for the same effect

<div class="row">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/NYCS-bull-trans-1.svg/1024px-NYCS-bull-trans-1.svg.png">
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Icon_2_%28set_basic%29.png"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/NYCS-bull-trans-4-red.svg/2048px-NYCS-bull-trans-4-red.svg.png"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/NYCS-bull-trans-1.svg/1024px-NYCS-bull-trans-1.svg.png">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Channel_5_logo_2011.svg/1024px-Channel_5_logo_2011.svg.png">
</div>

.row {
  width: 800px;
  background-color: blue;
  display: flex;
  gap: 1.25rem;
  overflow: hidden;
}

.row img {
  min-width: 220px;
  height: 220px;
}

Solution 2:[2]

Just add this code in your .gallery-row.

overflow : hidden

Solution 3:[3]

.gallery-row {
  width: 800px;
  background-color: blue;
  overflow: hidden;
  .list {
      display: flex;
      gap: 20px;
      list-style: none;
      width: 100%;
      .list__item {
        min-width: 220px;
        height: 220px;
        .list__thumbnail {
          width: 100%;
          height: 100%;
        }
      }
    }
}
<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>
    <div class="list__item">
      <img class="list__thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Icon_2_%28set_basic%29.png"> 
    </div>
    <div class="list__item">
      <img class="list__thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/NYCS-bull-trans-3.svg/1200px-NYCS-bull-trans-3.svg.png"> 
    </div>
    <div class="list__item">
      <img class="list__thumbnail" style="visibility: hidden;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/NYCS-bull-trans-4-red.svg/2048px-NYCS-bull-trans-4-red.svg.png">  
    </div>
    <div class="list__item">
      <img class="list__thumbnail" style="visibility: hidden;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Channel_5_logo_2011.svg/1024px-Channel_5_logo_2011.svg.png"> 
    </div>
  </ul>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 alechristopher
Solution 2 ouflak
Solution 3 Ferdi Ali Rahman

Related Questions