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.
Opens WPIDE on
Code
$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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.