<section>
  <header>
    <h2>top authors ___</h2>
    <a href="#">see all
      <svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
        <path d="M-838-2232H562v3600H-838z" fill="none" />
        <path d="M16 10v28l22-14z" />
        <path d="M0 0h48v48H0z" fill="none" />
      </svg></a>
  </header>
  <div class="grid-container">
    <div class="grid-item">
      <div class="grid-item-content">
        <img src="https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
        <h3>roy carroll</h3>
        <span>13 articles</span>
        <a href="#">read now
          <svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
            <path d="M-838-2232H562v3600H-838z" fill="none" />
            <path d="M16 10v28l22-14z" />
            <path d="M0 0h48v48H0z" fill="none" />
          </svg>
        </a>
      </div>
    </div>
    <div class="grid-item active">
      <div class="grid-item-content">
        <img src="https://images.pexels.com/photos/4075524/pexels-photo-4075524.png?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Delia Maldonado">
        <h3>delia maldonado</h3>
        <span>12 articles</span>
        <a href="#">read now
          <svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
            <path d="M-838-2232H562v3600H-838z" fill="none" />
            <path d="M16 10v28l22-14z" />
            <path d="M0 0h48v48H0z" fill="none" />
          </svg>
        </a>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-item-content">
        <img src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Susan Mills">
        <h3>susan mills</h3>
        <span>12 articles</span>
        <a href="#">read now
          <svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
            <path d="M-838-2232H562v3600H-838z" fill="none" />
            <path d="M16 10v28l22-14z" />
            <path d="M0 0h48v48H0z" fill="none" />
          </svg>
        </a>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-item-content">
        <img src="https://images.pexels.com/photos/762020/pexels-photo-762020.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Isabella Reyes">
        <h3>isabella reyes</h3>
        <span>11 articles</span>
        <a href="#">read now
          <svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
            <path d="M-838-2232H562v3600H-838z" fill="none" />
            <path d="M16 10v28l22-14z" />
            <path d="M0 0h48v48H0z" fill="none" />
          </svg>
        </a>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-item-content">
        <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Jackson Fitzgerald">
        <h3>jackson fitzgerald</h3>
        <span>11 articles</span>
        <a href="#">read now
          <svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
            <path d="M-838-2232H562v3600H-838z" fill="none" />
            <path d="M16 10v28l22-14z" />
            <path d="M0 0h48v48H0z" fill="none" />
          </svg>
        </a>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-item-content">
        <img src="https://images.pexels.com/photos/839011/pexels-photo-839011.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Vincent Boyd">
        <h3>vincent boyd</h3>
        <span>10 articles</span>
        <a href="#">read now
          <svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
            <path d="M-838-2232H562v3600H-838z" fill="none" />
            <path d="M16 10v28l22-14z" />
            <path d="M0 0h48v48H0z" fill="none" />
          </svg>
        </a>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-item-content">
        <img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Jayden Ray">
        <h3>jayden ray</h3>
        <span>10 articles</span>
        <a href="#">read now
          <svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
            <path d="M-838-2232H562v3600H-838z" fill="none" />
            <path d="M16 10v28l22-14z" />
            <path d="M0 0h48v48H0z" fill="none" />
          </svg>
        </a>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-item-content">
        <img src="https://images.pexels.com/photos/1181686/pexels-photo-1181686.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Lillian Bell">
        <h3>lillian bell</h3>
        <span>10 articles</span>
        <a href="#">read now
          <svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
            <path d="M-838-2232H562v3600H-838z" fill="none" />
            <path d="M16 10v28l22-14z" />
            <path d="M0 0h48v48H0z" fill="none" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap");

@mixin mQ($rem) {
  @media screen and (min-width: $rem) {
    @content;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #2f2f2f;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
}

%link {
  font-size: 0.8rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.031rem;

  svg {
    width: 0.875rem;
    margin-left: 0.188rem;
    fill: #f8b91c;
  }
}

section {
  max-width: 87.5rem;
  margin: 0 auto;
  padding: 2em;
  min-height: 100vh;
  display: grid;

  header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 1.25rem;

    h2 {
      color: #fff;
      text-transform: capitalize;
      font-weight: 500;
      padding-right: 0.938rem;
    }

    a {
      @extend %link;
    }
  }
}

.grid-container {
  display: grid;
  background-color: rgba(255, 255, 255, 0.4);
  grid-gap: 0.063rem;

  @include mQ(28.75rem) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  @include mQ(43.75rem) {
    grid-template-columns: repeat(3, 1fr);

    .grid-item:nth-child(2),
    .grid-item:nth-child(3),
    .grid-item:nth-child(6),
    .grid-item:nth-child(7) {
      grid-column: span 2;
    }
  }

  @include mQ(61rem) {
    grid-template-columns: repeat(4, 1fr);

    .grid-item:nth-child(2),
    .grid-item:nth-child(3),
    .grid-item:nth-child(6),
    .grid-item:nth-child(7) {
      grid-column: span 1;
    }
  }
}

.grid-item {
  background-color: #2f2f2f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5em 1em;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;

  &-content {
    display: grid;
    place-items: center;
  }

  img {
    width: clamp(7.5rem, 40vw, 10.625rem);
    height: clamp(7.5rem, 40vw, 10.625rem);
    border-radius: 50%;
    object-fit: cover;
    transition: 0.25s ease-in-out;
  }

  h3 {
    text-transform: capitalize;
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(1.25rem, 1.1667rem + 0.381vw, 1.5rem);
    margin: 1.1em 0 0.625rem 0;
  }

  span {
    text-transform: uppercase;
    display: inline-block;
    font-size: 0.9rem;
    color: #a3a3a3;
  }

  a {
    @extend %link;
    transform: translatey(2.5em);
    opacity: 0;
    transition: 0.6s ease-in-out;
    color: #111;

    svg {
      width: 0.875rem;
      margin-left: 0.188rem;
      fill: #111;
    }
  }
}

.grid-item {
  &.active {
    background: #f8b91c;
    color: #111;

    span {
      color: #111;
    }

    img {
      width: clamp(5rem, 60vw, 10rem);
      height: clamp(5rem, 60vw, 10rem);
    }

    a {
      opacity: 1;
    }
  }
}
View Compiled 
/*inspiration 
PINTEREST
*/

const cards = document.querySelectorAll(".grid-item");
cards.forEach((item) => {
  item.addEventListener("mouseover", () => {
    cards.forEach((el) => el.classList.remove("active"));
    item.classList.add("active");
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.