doctors-team-carousel

Summary

Auto-playing Slick carousel of doctor cards (3-up at desktop). Each card has a portrait, name, specialty, short bio, Read More pill, and a row of small social icons. A 3-px primary-color underline reveals on hover via scaleX transform.

HTML structure (minimal)

<section class="team-layout2 pb-80">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 offset-lg-3">
        <div class="heading text-center mb-40">
          <h3 class="heading__title">Meet Our Doctors</h3>
          <p class="heading__desc">Our administration and support staff…</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="slick-carousel"
             data-slick='{"slidesToShow":3,"slidesToScroll":1,"autoplay":true,"arrows":false,"dots":false,"responsive":[{"breakpoint":992,"settings":{"slidesToShow":2}},{"breakpoint":767,"settings":{"slidesToShow":1}}]}'>
          <div class="member">
            <div class="member__img"><img src="assets/images/team/1.jpg" alt="member img"></div>
            <div class="member__info">
              <h5 class="member__name"><a href="doctors-single-doctor1.html">Mike Dooley</a></h5>
              <p class="member__job">Cardiology Specialist</p>
              <p class="member__desc">Muldoone obtained his undergraduate degree in Biomedical Engineering at Tulane…</p>
              <div class="mt-20 d-flex flex-wrap justify-content-between align-items-center">
                <a href="doctors-single-doctor1.html" class="btn btn__secondary btn__link btn__rounded">
                  <span>Read More</span><i class="icon-arrow-right"></i>
                </a>
                <ul class="social-icons list-unstyled mb-0">
                  <li><a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a></li>
                  <li><a href="#" class="twitter"><i class="fab fa-twitter"></i></a></li>
                  <li><a href="#" class="phone"><i class="fas fa-phone-alt"></i></a></li>
                </ul>
              </div>
            </div>
          </div>
          <!-- additional members -->
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.member {
  position: relative; border-radius: 8px; background: $color-white;
  transition: all .4s ease-in-out; margin-bottom: 30px;

  &:before {
    content: ''; position: absolute; bottom: 0; left: 40px; right: 40px;
    height: 3px; background: $color-primary;
    transform: scaleX(0); transform-origin: center;
    transition: transform .4s linear; transition-delay: .3s;
  }
  &:hover:before { transform: scaleX(1); }

  .member__img { position: relative; overflow: hidden; border-radius: 6px;
    img { transition: all .9s ease; }
  }
  &:hover .member__img img { transform: scale(1.05); }

  .member__info { padding: 35px 40px; }
  .member__name a { color: $color-heading; }
  .member__name a:hover { color: $color-primary; }
  .member__job { color: $color-primary; margin-bottom: 10px; }
}

Animation logic

// Slick handles the slide + autoplay. Underline + photo zoom are pure CSS hover.

Notable details

• The 0.3-second delay on the underline transform is what makes it feel deliberate: you commit to hovering, then the line draws — much classier than an instant width change.
• Photo zoom uses a long 0.9-second ease so it feels like a slow rack-focus rather than a snap zoom.
• Read More pill and social icons share the same row using justify-content-between, so the card never has an awkward CTA / social-icons stack.

Use when

• Team/doctor/agent grids where each portrait deserves a slow, restrained hover affordance.
• Carousels where you want autoplay but no arrows/dots — clean enough that motion alone says "interactive".

Caveats

• The hover-only underline never fires on touch devices, so mobile users see flat cards. Consider adding an "active card" CSS class via Slick's slick-current for the centered slide.
• Social link styles rely on .facebook, .twitter, .phone class hooks — add new networks by extending the SCSS.