Loop through HTML elements in CSS and apply style

Question

I have 4 cards (extendible to N cards) in a stack that I want to show in a stacked effect using HTML and CSS.

Desired Output:

I have the following code so far, but need some help tweaking the CSS to show the stacked effect for all 4 cards instead of 2 cards.

body {
  background-color: #e8eaed;
}
.stack {
  width: 500px;
  height: 500px;
  position: absolute;
}

.card {
  width: 80%;
  min-height: 40%;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 10rem;
  color: #00000080;
  box-shadow: 0 5px 15px 0 #00000040, 0 5px 5px 0#00000020;
  transition: transform 200ms;
}

.card:nth-last-child(1) {
  --y: calc(-50% + 15px);
  transform: translate(-50%, var(--y)) scale(1.05);
}

<div class="stack">
      <div class="card" style="--i:1">1</div>
      <div class="card" style="--i:2">2</div>
      <div class="card" style="--i:3">3</div>
      <div class="card" style="--i:4">4</div>
</div>

It's not clear what you're asking until you click on the codepen and see that each card is larger than the previous one in the stack. Please edit your question to include the codepen as a stacksnippet rather than an external link. — Sean
– Sean, Commented Mar 1, 2021 at 21:54

Rounin · Accepted Answer · 2021-03-01 23:36:12Z

You are using the CSS Custom Property --y in your styles and the custom property --i in your markup.

I've made some edits to your styles, to demonstrate how you can achieve the effect you describe.

Working Example:

body {
  background-color: #e8eaed;
}
.stack {
  width: 500px;
  height: 500px;
  position: absolute;
}

.card {
  width: 80%;
  min-height: 40%;
  background-color: white;
  position: absolute;
  top: 100px;
  left: 100px;
  transform: translate(-50%, -50%);
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 10rem;
  color: #00000080;
  box-shadow: 0 5px 15px 0 #00000040, 0 5px 5px 0#00000020;
  transition: transform 200ms;
}

.card {
  transform: translateY(calc((var(--y) * 20px) - 50%)) scale(calc(1.0 + var(--y) * 0.05));
}

<div class="stack">
      <div class="card" style="--y:1">1</div>
      <div class="card" style="--y:2">2</div>
      <div class="card" style="--y:3">3</div>
      <div class="card" style="--y:4">4</div>
</div>

Collectives™ on Stack Overflow

Loop through HTML elements in CSS and apply style

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related