Login
Cards

Team Member Card

19 Sep 2022

Team member card with responsive image
HTML
SCSS
PostCSS
JS 
                            <a href="#" class="team-member-card">
  <div class="photo">
    <img src="./images/team-member.jpg" alt="" />
  </div>
  <h5>Zoe Houghton</h5>
  <h6>Position</h6>
  <object>
    <a href="#" class="btn">Find out more</a>
  </object>
</a>
                        
                            /* Card*/
.team-member-card {
  .photo {
    @include aspect-ratio(16, 11);
    border-radius: 20px;
    margin-bottom: 20px;

    img {
      @include transition-all;
    }
  }

  h5 {
    margin-bottom: 5px;
  }

  h6 {
    margin-bottom: 10px;
    line-height: 1.5;
  }

  &:hover {
    .photo img {
      transform: scale(1.12);
    }
  }
}
                        
                            /* Mixins */

@define-mixin aspect-ratio $width, $height, $maxHeight: 9999px, $minHeight: 0px {
    position: relative;
    overflow: hidden;

    /* fix for hover scale on image on Safari 15.1 */
    mask-image: radial-gradient(white, black);

    &::before {
        content: "";
        display: block;
        padding-bottom: max(min(perc($height, $width), $maxHeight), $minHeight);
    }

    img {
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
        top: 0;
        left: 0;
    }
}

@define-mixin transition-all $time: 0.25s {
    transition: ease-in-out $time;
}

/* Card*/

.team-member-card {
    .photo {
        @mixin aspect-ratio 16, 11;
        border-radius: 20px;
        margin-bottom: 20px;

        img {
            @mixin transition-all;
        }
    }

    h5 {
        margin-bottom: 5px;
    }

    h6 {
        margin-bottom: 10px;
        line-height: 1.5;
    }

    &:hover {
        .photo img {
            transform: scale(1.12);
        }
    }
}
                        
                            // Function for pcss
export const perc = (number1, number2 = maxWidth) => `${(number1 * 100) / number2}%`;

team-member.jpg

0