How to Create Overlapping Gallery in CSS

Add this beautiful overlapping effect to the photo gallery in CSS. You can add this to your school or college project. 😎

All you need is, basic HTML structure, some beautiful images and CSS styles. 😉

<section class="gallery">
    <img src="path/to/image/1" alt="Image-1" />
    <img src="path/to/image/2" alt="Image-2" />
    <img src="path/to/image/3" alt="Image-3" />
    <img src="path/to/image/4" alt="Image-4" />
    <img src="path/to/image/5" alt="Image-5" />
</section>

Add the following CSS styles

.gallery {
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.gallery img {
  height: 100%;
  width: 100%;
  flex-shrink 0;
  object-fit: cover;
  position: sticky; /* Don't forget to add this property */
  top: 0;
}

Overlapping Gallery in CSS

Finally you will get results something like this: 😍

See the Pen Untitled by Learn Let’s Earn (@learnletsearn) on CodePen.