In this tutorial, you will learn how to stack images on scroll using pure CSS. Watch the video below for a detailed tutorial.
<body>
<div class="container">
<ul>
<li id="img1">
<div>
<img src="images/img-1.jpg">
</div>
</li>
<li id="img2">
<div>
<img src="images/img-2.jpg">
</div>
</li>
<li id="img3">
<div>
<img src="images/img-3.jpg">
</div>
</li>
</ul>
</div>
</body>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;
}