team-grid-hover-reveal

Summary

Two-column team grid. Each portrait card uses a 130% padding-bottom aspect frame, with the image overscaled to 1.05 at rest and easing back to 1.0 on hover; the description (name, role, social icons) fades in over a 80% black overlay and a 4px accent line sweeps in from the left. The right column carries a small *The founders footnote and the cards may be vertically offset for a staggered reading rhythm.

HTML structure (minimal)

<div class="mil-team-list">
  <div class="mil-lines-place"></div>
  <div class="row mil-mb-60">
    <div class="col-sm-6">
      <div class="mil-team-card mil-up mil-mb-30">
        <img src="img/faces/1.jpg" alt="Team member">
        <div class="mil-description">
          <div class="mil-secrc-text">
            <h5 class="mil-muted mil-mb-5"><a href="home-2.html">Anna Oldman</a></h5>
            <p class="mil-link mil-light-soft mil-mb-10">Art Director</p>
            <ul class="mil-social-icons mil-center">
              <li><a href="#." class="social-icon"><i class="fab fa-behance"></i></a></li>
              <li><a href="#." class="social-icon"><i class="fab fa-dribbble"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <p class="mil-mobile-hidden mil-text-sm mil-mb-30"><span class="mil-accent">*</span> The founders of our agency</p>
      <!-- two more cards -->
    </div>
  </div>
</div>

Key SCSS tokens

.mil-team-card {
  position: relative; overflow: hidden; padding-bottom: 130%;
  &:after {
    content: ''; position: absolute; bottom: 0; left: 0;
    height: 4px; width: 0; background-color: $accent; transition: $t-lg;
  }
  & img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: top;
    transform: scale(1.05); transition: $t-md;
  }
  & .mil-description {
    opacity: 0; pointer-events: none;
    background-color: $dt-80;
    position: absolute; inset: 0;
    padding: 60px 30px;
    display: flex; flex-direction: column; justify-content: flex-end;
    transition: $t-lg;
    & .mil-secrc-text {
      opacity: 0; transform: translateY(15px);
      transition: $t-md; transition-delay: 0s;
    }
  }
  &:hover {
    & img { transform: scale(1); }
    &:after { width: 100%; }
    & .mil-description {
      opacity: 1; pointer-events: all;
      & .mil-secrc-text { opacity: 1; transform: translateY(0); transition-delay: .1s; }
    }
  }
}

Animation logic

// no per-card JS — hover is pure CSS
// only the global .mil-up GSAP fromTo provides scroll-in for each card

Notable details

• Inverse-scale hover: image is overscaled at rest and snaps to 1.0 on hover, the opposite of the typical zoom-in pattern — feels like the photo "settles" rather than reacts.
• Accent line uses &:after width 0→100% in 0.6s — same primitive as the service card, repeated for visual rhythm across the page.
• Inner text uses an extra 0.1s transition-delay after the overlay so it cascades in (overlay → text).
• The asymmetric mil-offset-card modifier translates a card 60px down — used elsewhere to break grid regularity without changing column spans.

Use when

• Studio / agency team pages where you want to hide names by default and let the photography lead.
• Editorial layouts that benefit from staggered (offset) cards rather than a uniform grid.
• Anywhere you'd otherwise reach for a "card flip" — the overlay reveal here is calmer and more readable.

Caveats

• Hover-only reveal is invisible on touch — consider an alternative state for mobile (the current SCSS doesn't add one).
• 130% aspect ratio crops faces tightly; supply portrait photographs framed with headroom.
• pointer-events: none on the resting overlay means the social icons cannot be tabbed to until hover; revisit for accessibility.