# Team Grid Card Styles (SCSS)

> Gives the [team] grid rounded photos, a gentle hover lift and tidy name and job title typography, with motion turned off for visitors who prefer less.

- Type: SCSS
- Runs: Site-wide header
- Category: [Custom Post Types & Fields](https://wpide.com/library/category/post-types/)
- Tags: scss, team, styling
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/team-grid-scss/

## Code

```scss
$photo-radius: 12px;
$lift: -4px;

.team-grid {
    .team-member {
        text-align: center;
        transition: transform 0.2s ease;

        img {
            border-radius: $photo-radius;
        }

        &:hover,
        &:focus-within {
            transform: translateY($lift);
        }
    }

    .team-name {
        font-size: 1.1em;

        a {
            color: inherit;
            text-decoration: none;

            &:hover,
            &:focus {
                text-decoration: underline;
            }
        }
    }

    .team-role {
        font-size: 0.9em;
        opacity: 0.75;
    }
}

@media (prefers-reduced-motion: reduce) {
    .team-grid .team-member {
        transition: none;

        &:hover,
        &:focus-within {
            transform: none;
        }
    }
}
```

## Notes

Set $photo-radius to 50% for circular photos.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Team Grid Card Styles (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/