Hover Cards 3D

What is Hover Cards 3D?

What is Hover Cards 3D? Hover Cards 3D is a premium interaction component that transforms a row of feature cards into an overlapping, perspective-driven 3D fan when the user hovers over the container. Each card rotates on the Y-axis, shifts in depth, and scales dynamically to create a natural deck-of-cards effect. Ideal for SaaS feature sections, agency portfolios, product benefit breakdowns, and any layout where static cards fall flat. Core Features Five built-in theme presets — Clean, Midnight, Ocean, Ember, and Frost — with a Custom mode for full colour control 3D perspective fan effect with configurable rotation, spread, depth, and center scale Per-card CTA buttons with a premium slide-fill hover animation and individual text and link controls Responsive scaling that automatically adjusts the 3D effect intensity based on container width Smooth, performant CSS transitions with three speed modes and three easing curves Controls inside Framer Theme Theme preset selector — Clean, Midnight, Ocean, Ember, Frost, or Custom Cards Up to 5 cards, each with title, description, image, button text, and button link Layout Gap between cards Border radius Card padding Colors (Custom theme only) Card background Title colour Description colour Shadow colour 3D Effect Rotation — Y-axis tilt angle for side cards Spread — horizontal offset that controls overlap intensity Depth — Z-axis separation between center and side cards Center Scale — scale multiplier for the focused center card Animation Speed — Fast, Medium, or Slow Easing — Smooth, Snappy, or Bouncy CTA Button Show or hide buttons globally Button colour and text colour Typography Font family and weight Best use cases SaaS and startup landing pages to showcase three to five key product features with depth and motion Agency and portfolio sites to present service offerings or case study categories with a premium interaction Product and pricing pages to highlight plan benefits or feature tiers in a visually engaging layout Marketing microsites where a single hero interaction needs to communicate value within seconds Drop HoverCards3D into any section and turn a flat feature grid into a dimensional, interactive showcase that holds attention and drives clicks. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Cards that fan into 3D perspective.