Create Stacked Cards Using Pure HTML and CSS

 

<div card-stack>
<input id="card-0" name="card-set" type="radio" checked/>
<div card>
<div class="content">
<h2>Steps to Frontend Success</h2>
<p>A life well lived.</p>
<label for="card-1">Learn More</label>
</div>
</div>
<input id="card-1" name="card-set" type="radio"/>
<div card>
<div class="content">
<h2>Step 1</h2>
<p>Write some markup.</p>
<label for="card-2">Go to 2</label>
</div>
</div>
<input id="card-2" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 2</h2>
<p>Write some CSS.</p>
<label for="card-3">Go to 3</label>
</div>
</div>
<input id="card-3" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 3</h2>
<p>Look up stuff on MDN.</p>
<label for="card-4">Go to 4</label>
</div>
</div>
<input id="card-4" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 4</h2>
<p>Switch Pre-Processors. Because things are starting to get complicated.</p>
<label for="card-5">Go to 5</label>
</div>
</div>
<input id="card-5" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 5</h2>
<p>Thow out your work start over, becasuse this time you definately choose the right framework.</p>
<label for="card-6">Go to 6</label>
</div>
</div>
<input id="card-6" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 6</h2>
<p>Break down and cry.</p>
<label for="card-7">Go to 7</label>
</div>
</div>
<input id="card-7" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 7</h2>
<p>Curl up in fetal position.</p>
<label for="card-8">Go to 8</label>
</div>
</div>
<input id="card-8" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 8</h2>
<p>Write more CSS to cover up your already bad CSS.</p>
<label for="card-0">Start Over</label>
</div>
</div>
</div>

50+ Html ,Css & Javascript Projects With Source Code

There is all the Html Code for the Stacked Cards. Now, you can see output without CSS, then we write CSS for the Stacked Cards Effect.

Output

 

CSS Code For Stacked Cards

[card-stack] {
will-change: transform;
position: relative;
width: 20rem;
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
}
[name="card-set"] {
display: none;
}
[name="card-set"]:checked + [card] {
display: flex;
opacity: 1;
filter: blur(0);
transform: translateY(0) scale(1);
transition: transform 1s, opacity 1s, filter 0.25s;
transition-delay: 0.3s;
z-index: 0;
}
[name="card-set"]:checked + [card] ~ [card] {
z-index: -1;
display: flex;
opacity: 0.9;
filter: blur(1px);
transform: translateY(1.2rem) scale(0.95);
transition: transform 1.5s, opacity 1.5s, filter 0.5s;
transition-delay: 0.4s;
}
[name="card-set"]:checked + [card] ~ [card] ~ [card] {
z-index: -2;
display: flex;
opacity: 0.7;
filter: blur(2px);
transform: translateY(2.4rem) scale(0.9);
transition: transform 2s, opacity 2s, filter 1.5s;
transition-delay: 0.5s;
}
[name="card-set"]:checked + [card] ~ [card] ~ [card] ~ [card] {
z-index: -3;
display: flex;
opacity: 0.5;
filter: blur(3px);
transform: translateY(3.6rem) scale(0.85);
transition: transform 2.5s, opacity 2.5s, filter 2s;
transition-delay: 0.7s;
}
[name="card-set"]:checked + [card] ~ [card] ~ [card] ~ [card] ~ [card] {
z-index: -4;
display: flex;
opacity: 0;
filter: blur(4px);
transform: translateY(5rem) scale(0.8);
transition: transform 3s, opacity 3s, filter 2.5s;
transition-delay: 0.8s;
}
[card] {
display: flex;
will-change: filter opacity transform;
position: absolute;
top: 0;
width: 100%;
background-color: white;
opacity: 0;
transform: translateY(0) translateX(calc(-100% - 1rem)) scale(1);
transition: transform 0.5s, opacity 0.2s 0.3s, filter 0.1s;
transition-timing-function: ease-in;
box-shadow: 0 0.2rem 0 rgba(0, 0, 0, .2);
border-radius: 5px;
justify-content: center;
align-items: center;
z-index: 1;
min-height: 50vh;
}
[card]::before {
content: '';
display: block;
padding-bottom: 130%;
}
[card] .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 2rem;
text-align: center;
}
[card] label {
color: white;
display: inline-block;
padding: 1rem 2rem;
margin: 1rem;
background-color: #47cf73;
border-radius: 200px;
user-select: none;
}
[card] label:hover {
background-color: #6fda92;
}
[card] label:active {
background-color: #248c46;
}
body {
background: #248c46;
}