Cards & Layouts | Effect.Labs

Q: How to create a card with a tilt effect in CSS?

The tilt effect requires JavaScript to track the mouse position. Calculate the X and Y rotation angles based on the cursor position relative to the card center. Apply transform: perspective(1000px) rotateX rotateY.

Q: What is the best hover animation for a product card?

The lift (translateY -8px + box-shadow) is the e-commerce standard. For more impact, add a border-color change and a slight scale increase (1.02). Keep the transition under 300ms.

Q: How to create a card that flips on click?

Use the flip technique: two faces (front/back) with backface-visibility:hidden. The back is pre-rotated 180deg. On click, add a class that rotates the container 180deg with a transition.

Q: How to make a responsive card grid without media queries?

Use CSS Grid with repeat(auto-fill, minmax(300px, 1fr)). Cards automatically reorganize based on available space. Add gap for spacing. No breakpoints needed.

Q: How to animate cards appearing on scroll?

Use IntersectionObserver to detect when cards enter the viewport. Add a class that triggers the animation (opacity:0 to 1, translateY:20px to 0). Add an incremental delay for a cascade effect.

How do you create cards that engage your users? These 33 CSS card components cover every style: 3D tilt on hover, flip cards, hover effects, glassmorphism, expandable cards and animated grid layouts. Each card is responsive and accessible.

3D Tilt

3D Tilt Effect

The card tilts based on the mouse position.

JS 3D Interactive

Glass

Glassmorphism

Frosted glass effect with backdrop-filter blur.

CSS Glass Modern

Spotlight

Spotlight Effect

Light that follows the cursor across the card.

JS Light Hover

Border

Animated Border

Continuously animated gradient border.

CSS Gradient Loop

Front

Back

Flip Card

3D flip on hover.

CSS 3D Flip

Lift

Hover Lift

Lift and scale on hover with drop shadow.

CSS Hover Shadow

Morph

Morphing Shape

Border-radius that changes continuously.

CSS Animation Organic

Glow

Glow Pulse

Glowing halo that pulses continuously.

CSS Glow Loop

Card 3

Card 2

Stack

Stacked Cards

Cards fan out on hover.

CSS Stack Hover

Click

Full Content

The card transforms to reveal its detailed content on click.

Card Morph

The card expands and reveals its content on click.

JS Click Expand

BG Mid Parallax

Parallax Layers

Depth effect with multiple 3D layers.

CSS 3D Parallax

Shine

Shine Effect

Shiny reflection that sweeps across the card on hover.

CSS Hover Light

Neumorphic

Soft UI style with gentle shadows and subtle reliefs.

CSS Soft UI Modern

Clay

Claymorphism

3D clay style with organic depth effect.

CSS 3D Organic

Reveal

Hidden content that appears on card hover.

Content Reveal

Hidden content progressively reveals on hover.

CSS Hover Reveal

Zoom

Image Zoom

The image zooms in within the card on hover.

CSS Hover Image

Holographic

Continuously animated rainbow holographic effect.

CSS Rainbow Loop

Featured

Wide

Basic Bento

Simple bento grid with hover animations on each cell. Scale and glow effect.

CSS Grid Hover

Design

Photo

Video

Motion

Art

Bento with Images

Cells with gradient backgrounds and overlay that appears on hover.

CSS Images Overlay

Animated Bento

Cells appear in cascade with a stagger effect on load.

CSS Animation Stagger

Click

Interactive Bento

Click a cell to expand it. Click again to collapse it.

JS Click Expand

0 Active Users

0 Projects

0 %

0 Countries

0 M Downloads

0 Average Rating

Bento with Stats

Statistics display with animated number counters on hover.

JS Stats Counter

Performance

Optimized for ultra-fast loading times.

Modular

Flexible architecture.

Layout

Adaptive grids.

3D Ready

Built-in WebGL support.

Secure

Advanced protection.

Hover Reveal Bento

Content reveals on hover with a smooth transition.

CSS Reveal Hover

Card 3

Card 2

Card 1

Bento Card Stack

Stacked cards that fan out on hover.

CSS Stack Cards

Large 2x2

Wide 2x1

Tall 1x2

1x1

Wide 2x1

1x1

Resize

Responsive Bento

Grid that elegantly reorganizes. Resize the container to see the effect.

CSS Responsive Auto-fit

Dashboard

Analytics

Settings

Profile

Messages

Support

Grid to List Toggle

Items morphing between grid and list layout with smooth CSS grid transitions.

CSS Grid FLIP

Card Detailed content that appears when the card expands to full screen.

Card Expand to Full

Card that expands from its position to full screen with position/size transition.

CSS JS FLIP

available effects

Tab Content Morph

Tab panel with morphing crossfade and content position transition.

CSS JS Tabs

Masonry to Grid

Items that animate from an organic masonry layout to a strict grid and back.

CSS Layout Transition

Sidebar to Overlay

Sidebar that transforms into a full-screen overlay with smooth content reflow.

CSS JS Layout

Panel A

Panel B

Split Screen Morph

Two-panel layout morphing between 50/50, 70/30, and single panel with CSS flex transitions.

CSS Flex Layout

Stacked to Spread

Stacked cards that spread into a grid with elastic cubic-bezier animation.

CSS Transform Elastic

Gallery to Slideshow

Image gallery morphing into full-screen slideshow with position animation and navigation.

Fundamentals

Design & Visuals

Animations & Scroll

Gallery & More