Color Reveal
No library Beginner
A vivid pink-to-purple gradient overlay slides up from the bottom on hover, fully covering the card with secondary content. Pure CSS transitions, no dependencies.
A vivid pink-to-purple gradient overlay slides up from the bottom on hover, fully covering the card with secondary content. Pure CSS transitions, no dependencies.
Goal: Create a "Color Reveal" card animation.
Visual behavior: A fixed-height card (160×140px). On hover, a vivid pink-to-purple gradient overlay (position: absolute, inset 0) slides up from below the card (translateY 100% → 0) over ~380ms, fully covering the base content. The overlay shows secondary content (icon + text). On mouse-leave it slides back down.
Technique: React useState tracks hover. The overlay div has position: absolute, inset 0, and transitions between translateY(100%) and translateY(0). The base card uses position: relative and overflow: hidden to clip the overlay.
Accessibility: Transition removed under prefers-reduced-motion (overlay remains hidden or instantly shown).
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.