With Hover Cards

A team grid where each photo reveals a short bio and social links on hover. Keeps the layout clean while extra detail stays one mouse move away.

import { Twitter, Github, Linkedin } from '@/components/ui/brand-icons';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';

const team = [
  {
    name: 'David Forren',
    role: 'Founder / CEO',
    bio: 'I am an ambitious workaholic, but apart from that, pretty simple person.',
    image:
      'https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&h=533&q=80',
  },
  {
    name: 'Amil Evara',
    role: 'UI/UX Designer',
    bio: 'I am an ambitious workaholic, but apart from that, pretty simple person.',
    image:
      'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&h=533&q=80',
  },
  {
    name: 'Ebele Egbuna',
    role: 'Support Consultant',
    bio: 'I am an ambitious workaholic, but apart from that, pretty simple person.',
    image:
      'https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&h=533&q=80',
  },
  {
    name: 'Maria Powers',
    role: 'Director of sales',
    bio: 'I am an ambitious workaholic, but apart from that, pretty simple person.',
    image:
      'https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&h=533&q=80',
  },
];

export default function WithHoverCards() {
  return (
    <div className="container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]">
      {/* Title */}
      <div className="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
        <h2 className="text-3xl font-bold md:text-4xl md:leading-tight">
          Meet our team
        </h2>
        <p className="text-muted-foreground mt-1 text-lg">
          The amazing people behind the scenes
        </p>
      </div>
      {/* End Title */}

      {/* Grid */}
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {team.map((member) => (
          <Card
            key={member.name}
            className="group relative overflow-hidden p-0 transition-shadow hover:shadow-lg"
          >
            <CardContent className="!p-0">
              <div className="relative">
                <img
                  className="aspect-[3/4] w-full object-cover"
                  src={member.image}
                  alt={member.name}
                  width={320}
                  height={420}
                />
                <div className="from-background/80 to-background/0 absolute inset-0 bg-gradient-to-t opacity-0 transition-opacity group-hover:opacity-100" />
                <div className="absolute right-0 bottom-0 left-0 translate-y-4 p-4 opacity-0 transition group-hover:translate-y-0 group-hover:opacity-100">
                  <p className="text-sm">{member.bio}</p>
                  <div className="mt-3 flex gap-1">
                    <Button size="icon" variant="secondary">
                      <Twitter className="size-4" />
                    </Button>
                    <Button size="icon" variant="secondary">
                      <Github className="size-4" />
                    </Button>
                    <Button size="icon" variant="secondary">
                      <Linkedin className="size-4" />
                    </Button>
                  </div>
                </div>
              </div>
              <div className="p-4">
                <h3 className="font-medium">{member.name}</h3>
                <p className="text-muted-foreground mt-1 text-sm">
                  {member.role}
                </p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
      {/* End Grid */}
    </div>
  );
}

About this block

With Hover Cards opens with a centered heading and a short subtitle, then drops into a four-column portrait grid. Each card holds a 3:4 photo that fills the card top to bottom. Below the photo a small block shows the person's name and role in plain text. When a visitor hovers, a translucent gradient slides up over the bottom of the portrait, and a short bio plus a row of icon buttons for Twitter, GitHub, and LinkedIn animate in from below.

The heading text, the number of cards, and every piece of per-member content (name, role, bio, photo, social links) are all independent. You can add or remove team members by editing the data array, and you can drop the social buttons entirely if you do not need them. The grid reflows to two columns on tablet and one on mobile without any extra work.

When to use

This layout suits an online education platform that wants to introduce its instructors without cluttering the page with bios at rest. The hover reveal keeps the grid clean for quick scanning while still letting curious visitors learn more about each person without clicking away. It is a better fit than the plain Simple Cards layout when you have a short bio worth surfacing, and a lighter choice than Alternating Sections when you do not need the extra room that layout provides.

A natural flow around it on a Marketing (Legacy) page:

Before

An About Sections block to set the company story before introducing the people behind it
A short Hero Sections block to anchor the page and give the team section a clear context

After

A Testimonials block so social proof follows right after faces, reinforcing credibility
A CTA Sections block to invite visitors to reach out or sign up after meeting the team

What you can display

Each card holds one person, so the natural content is your core team or a featured instructor roster. A few other ways to use the frame:

Course instructors. List each educator with their subject area as the role and a one-sentence teaching philosophy as the bio.
Advisory board. Spotlight a small group of advisors with their company affiliation in the role field and relevant credentials in the bio overlay.
Conference speakers. Swap team for speaker headshots, use talk titles as the role, and link social profiles so attendees can follow presenters before the event.

Tip: keep bios to a single short sentence so the overlay stays readable at the card's natural width without the text overflowing.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

An About Sections block to set the company story before introducing the people behind it
A short Hero Sections block to anchor the page and give the team section a clear context

After

A Testimonials block so social proof follows right after faces, reinforcing credibility
A CTA Sections block to invite visitors to reach out or sign up after meeting the team

What you can display

Each card holds one person, so the natural content is your core team or a featured instructor roster. A few other ways to use the frame:

Course instructors. List each educator with their subject area as the role and a one-sentence teaching philosophy as the bio.
Advisory board. Spotlight a small group of advisors with their company affiliation in the role field and relevant credentials in the bio overlay.
Conference speakers. Swap team for speaker headshots, use talk titles as the role, and link social profiles so attendees can follow presenters before the event.

Tip: keep bios to a single short sentence so the overlay stays readable at the card's natural width without the text overflowing.

With Hover Cards

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display