diff --git a/submissions/examples/stacked-cards-55613/README.md b/submissions/examples/stacked-cards-55613/README.md new file mode 100644 index 00000000000..74e1d5c879f --- /dev/null +++ b/submissions/examples/stacked-cards-55613/README.md @@ -0,0 +1,21 @@ +# Stacked Deck Card Fan-Out Reveal + +## What does this do? +Creates a component where 3 cards are stacked on top of each other (like a deck of playing cards). When the user hovers over the container, the cards beautifully fan out radially using `transform: rotate()` and `translate()`. + +## How is it used? +```html +
+
3
+
2
+
1
+
+``` +*(Note: Because of absolute positioning, the last element in the DOM appears on top).* + +## Why does it fit EaseMotion CSS? +It provides a highly tactile, engaging interaction perfect for highlighting portfolios or testimonials. Using `nth-child` selectors and `cubic-bezier` transitions, it requires no JS state management to handle complex overlapping hover states. + +## Tech Stack +- HTML +- CSS (No JavaScript) diff --git a/submissions/examples/stacked-cards-55613/demo.html b/submissions/examples/stacked-cards-55613/demo.html new file mode 100644 index 00000000000..72f5d89027d --- /dev/null +++ b/submissions/examples/stacked-cards-55613/demo.html @@ -0,0 +1,32 @@ + + + + + + Stacked Deck Fan-Out Demo + + + + +
+ +
3
+ + +
2
+ + +
1
+
+ + diff --git a/submissions/examples/stacked-cards-55613/style.css b/submissions/examples/stacked-cards-55613/style.css new file mode 100644 index 00000000000..886890392d9 --- /dev/null +++ b/submissions/examples/stacked-cards-55613/style.css @@ -0,0 +1,62 @@ +.ease-stacked-container { + position: relative; + width: 200px; + height: 280px; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; +} + +.ease-stacked-card { + position: absolute; + width: 100%; + height: 100%; + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; + transform-origin: bottom center; + display: flex; + justify-content: center; + align-items: center; + font-size: 2rem; + color: white; + font-weight: bold; +} + +/* Base un-hovered stack state */ +.ease-stacked-card:nth-child(1) { + background: linear-gradient(135deg, #f43f5e, #fb923c); + z-index: 3; + transform: rotate(0deg) translateY(0); +} + +.ease-stacked-card:nth-child(2) { + background: linear-gradient(135deg, #3b82f6, #8b5cf6); + z-index: 2; + transform: rotate(4deg) translateY(-5px) scale(0.95); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); +} + +.ease-stacked-card:nth-child(3) { + background: linear-gradient(135deg, #10b981, #3b82f6); + z-index: 1; + transform: rotate(8deg) translateY(-10px) scale(0.9); + box-shadow: 0 4px 5px rgba(0, 0, 0, 0.02); +} + +/* Hovered fan-out state */ +.ease-stacked-container:hover .ease-stacked-card:nth-child(1) { + transform: rotate(-15deg) translateY(-10px) translateX(-20px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); +} + +.ease-stacked-container:hover .ease-stacked-card:nth-child(2) { + transform: rotate(0deg) translateY(-20px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); +} + +.ease-stacked-container:hover .ease-stacked-card:nth-child(3) { + transform: rotate(15deg) translateY(-10px) translateX(20px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); +}