← Catalogue

Stacking Cards

Preview

Des cards image + panneau verre dépoli qui s'empilent au scroll (sticky stacking). 100% CSS.

#scroll#sticky#cards#stacking

Aperçu

Stacking Cards

Code source

HTML
<div class="wtl-stack">
  <article class="wtl-stack__card">
    <img class="wtl-stack__img" src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=1100&q=80" alt="" />
    <div class="wtl-stack__panel">
      <span class="wtl-stack__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/></svg></span>
      <h3 class="wtl-stack__card-title">Gestion de bout en bout</h3>
      <p class="wtl-stack__card-text">Une prise en charge complète, de la mise en place au suivi quotidien, pour vous libérer l'esprit à chaque étape.</p>
    </div>
  </article>


  <article class="wtl-stack__card">
    <img class="wtl-stack__img" src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1100&q=80" alt="" />
    <div class="wtl-stack__panel">
      <span class="wtl-stack__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg></span>
      <h3 class="wtl-stack__card-title">Optimisation &amp; visibilité</h3>
      <p class="wtl-stack__card-text">Présentation soignée et réglages optimisés pour maximiser votre portée et vos résultats.</p>
    </div>
  </article>


  <article class="wtl-stack__card">
    <img class="wtl-stack__img" src="https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=1100&q=80" alt="" />
    <div class="wtl-stack__panel">
      <span class="wtl-stack__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z"/></svg></span>
      <h3 class="wtl-stack__card-title">Support 7j/7</h3>
      <p class="wtl-stack__card-text">Une réponse rapide et un suivi attentif, sept jours sur sept, pour une expérience irréprochable.</p>
    </div>
  </article>


  <article class="wtl-stack__card">
    <img class="wtl-stack__img" src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?w=1100&q=80" alt="" />
    <div class="wtl-stack__panel">
      <span class="wtl-stack__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="10" width="8" height="11" rx="2"/><path d="M9 10V6.5h4V10"/><path d="M13 7h3v2"/></svg></span>
      <h3 class="wtl-stack__card-title">Qualité &amp; finitions</h3>
      <p class="wtl-stack__card-text">Un soin du détail constant entre chaque étape, pour un résultat toujours impeccable.</p>
    </div>
  </article>
</div>
CSS
/* Stacking Cards — des cards image + panneau verre dépoli qui s'empilent au
   scroll (position: sticky, top croissant). 100% CSS, police Geist.
   Surcharge --wtl-stack-accent pour changer la couleur de la pastille. */


.wtl-stack {
  --wtl-stack-accent: #d94a26;
  --wtl-stack-radius: 18px;


  max-width: 560px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  font-family: "Geist", system-ui, sans-serif;
}


/* Rétablit un flux normal dans l'aperçu (body centré) — sans effet en
   intégration où body est déjà en block. */
body {
  display: block;
}


.wtl-stack__card {
  position: relative;
  display: flex;
  min-height: 440px;
  border-radius: var(--wtl-stack-radius);
  overflow: hidden;
}


.wtl-stack__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.wtl-stack__panel {
  position: relative;
  margin: auto 1rem 1rem;
  width: calc(100% - 2rem);
  padding: 1.5rem;
  border-radius: var(--wtl-stack-radius);
  background: rgba(20, 17, 15, 0.34);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}
.wtl-stack__icon {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--wtl-stack-accent);
  color: #fff;
}
.wtl-stack__icon svg {
  width: 20px;
  height: 20px;
}
.wtl-stack__card-title {
  margin: 0;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.15;
}
.wtl-stack__card-text {
  margin: 0.55rem 0 0;
  line-height: 1.5;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
}


/* L'empilement : chaque card colle un peu plus bas que la précédente. */
@media (min-width: 1024px) {
  .wtl-stack {
    gap: 3.5rem;
  }
  /* Course de défilement (dans le conteneur, donc prise en compte par le
     sticky) pour que la DERNIÈRE card remonte coiffer entièrement les autres.
     À retirer si une section suit déjà le composant dans la page. */
  .wtl-stack::after {
    content: "";
    display: block;
    height: 45vh;
  }
  .wtl-stack__card {
    position: sticky;
    box-shadow: 0 -12px 40px rgba(20, 17, 15, 0.14);
  }
  .wtl-stack__card:nth-child(1) {
    top: 7rem;
  }
  .wtl-stack__card:nth-child(2) {
    top: 8rem;
  }
  .wtl-stack__card:nth-child(3) {
    top: 9rem;
  }
  .wtl-stack__card:nth-child(4) {
    top: 10rem;
  }
}
JS
// Empilement 100% CSS (position: sticky) — aucun JavaScript nécessaire.