ライブデモ Live Demo

カードを少しずらして重ね、ホバー時にスケールアップして浮き上がらせます。`--stack-offset` と `--stack-scale` でレイヤー間の距離と縮小率を制御します。

Cards are slightly offset and stacked, scaling up and lifting on hover. Use `--stack-offset` and `--stack-scale` to control the distance between layers and scale ratio.

New

Advanced Analytics

Deep insights into user behavior patterns with real-time tracking and custom dashboards.

Pro

Team Collaboration

Enhanced workflow tools for seamless team communication and project management.

Basic

Essential Features

Core functionality to get started with powerful automation and integrations.

8px

AI向け説明 AI Description

`L-002` はCSSの `transform: scale()` と `translateY()` を組み合わせてカードを階層的に重ねます。`:nth-child` セレクタで各カードのオフセットと不透明度を制御し、`:hover` でスケールアップとリフトのトランジションを実行します。

`L-002` layers cards using `transform: scale()` and `translateY()`. Each card's offset and opacity are controlled via `:nth-child` selectors, while `:hover` triggers scale-up and lift transitions.

調整可能パラメータ Adjustable Parameters

実装 Implementation

HTML + CSS

<div class="card-stack">
  <div class="stack-card">Card 1</div>
  <div class="stack-card">Card 2</div>
  <div class="stack-card">Card 3</div>
</div>

<style>
:root {
  --stack-offset: 8px;
}

.card-stack {
  position: relative;
  max-width: 400px;
  padding-top: calc(var(--stack-offset) * 2);
}

.stack-card {
  position: relative;
  background: linear-gradient(135deg, #1a1f3a, #2a3256);
  border-radius: 20px;
  padding: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stack-card:first-child { z-index: 3; }
.stack-card:nth-child(2) {
  z-index: 2;
  transform: scale(0.98) translateY(calc(var(--stack-offset) * -1));
  margin-top: calc(var(--stack-offset) * -1);
}
.stack-card:nth-child(3) {
  z-index: 1;
  transform: scale(0.96) translateY(calc(var(--stack-offset) * -2));
  margin-top: calc(var(--stack-offset) * -1);
  opacity: 0.8;
}

.stack-card:hover {
  transform: scale(1.02) translateY(-8px);
  box-shadow: 0 20px 40px rgba(92, 106, 196, 0.3);
  z-index: 10;
}
</style>

React (JSX + CSS)

// react/L-002.jsx
import "./L-002.css";

const cards = [
  { badge: "New", title: "Analytics", desc: "Deep insights..." },
  { badge: "Pro", title: "Collaboration", desc: "Team tools..." },
  { badge: "Basic", title: "Essentials", desc: "Core features..." },
];

export default function LayeredCardStack({ offset = 8 }) {
  return (
    <div className="card-stack" style={{ ["--stack-offset"]: `${offset}px` }}>
      {cards.map((card) => (
        <div key={card.title} className="stack-card">
          <span className="card-badge">{card.badge}</span>
          <h3>{card.title}</h3>
          <p>{card.desc}</p>
        </div>
      ))}
    </div>
  );
}
/* react/L-002.css */
.card-stack {
  position: relative;
  max-width: 400px;
  padding-top: calc(var(--stack-offset) * 2);
}

.stack-card {
  position: relative;
  background: linear-gradient(135deg, #1a1f3a, #2a3256);
  border-radius: 20px;
  padding: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stack-card:nth-child(2) {
  transform: scale(0.98) translateY(calc(var(--stack-offset) * -1));
  margin-top: calc(var(--stack-offset) * -1);
}

.stack-card:nth-child(3) {
  transform: scale(0.96) translateY(calc(var(--stack-offset) * -2));
  margin-top: calc(var(--stack-offset) * -1);
  opacity: 0.8;
}

.stack-card:hover {
  transform: scale(1.02) translateY(-8px);
  box-shadow: 0 20px 40px rgba(92, 106, 196, 0.3);
  z-index: 10;
}

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

注意とバリエーション Notes & Variations

複数のスタックを横に配置してグリッドレイアウトを作成したり、カード内により複雑なコンテンツ（画像、グラフ、フォーム）を配置することができます。

Create grid layouts by placing multiple stacks side by side, or include more complex content within cards (images, charts, forms).