Stack Images on Scroll

In this tutorial, you will learn how to stack images on scroll using pure CSS. Watch the video below for a detailed tutorial.


    <div class="container">
            <li id="img1">
                    <img src="images/img-1.jpg">
            <li id="img2">
                    <img src="images/img-2.jpg">
            <li id="img3">
                    <img src="images/img-3.jpg">


body {
	background-color: #2E3537;

:root {
	--images: 3;
	--divHeight: 87vh;
	--divTopPadding: 1.5em;
	--divMargin: 4vw;

.container {
	margin: 0 auto;

ul {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--images), var(--divHeight));
	gap: var(--divMargin);
	padding-bottom: calc(var(--images) * var(--divTopPadding));
	margin-bottom: var(--divMargin);

ul li {
	position: sticky;
	top: 0;
	padding-top: calc(var(--index) * var(--divTopPadding));

ul li div {
	box-sizing: border-box;
	height: var(--divHeight);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.5s;

ul li div img {
	height: 100%;

#img1 {
	--index: 1;

#img2 {
	--index: 2;

#img3 {
	--index: 3;

Image Source