Card Hover Effect
Grid of cards with animated hover states that highlight the hovered card while dimming others.
Preview
Card Hover Effect
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Feature grids and service listings.
Why this component matters
Focus through contrast. Dimming non-hovered cards creates visual hierarchy on demand.
Usage guidance
Use in grids of 3-6 cards. Each card should have an icon, title, and one-line description. The hover effect works best when all cards are equal in visual weight.
Installation
bash
npx shadcn@latest add @aceternity/card-hover-effectUsage
example.tsxtsx
import { CardHoverEffect } from "@/components/ui/card-hover-effect";
export default function Example() {
return (
<CardHoverEffect>
{/* Your content here */}
</CardHoverEffect>
);
}Source
card-hover-effect.tsx
components/ui/card-hover-effect.tsx