Small face

This animation is displaying a team member card, which is expending on click with member photo and contact changing on hover.

In order to achieve it you will find below the various codes to be used. Despite using Bricks, I tried to list up all the necessary steps to complete the animation to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For Bricks, please follow the HTML/CSS structure so you can add-up divs and give them CSS instead of putting it into the code element in order to avoid FOUC as the code element is loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no CSS reset has been applied and the font is not defined.

For the JavaScript, the toggle class and intersection observer can be reproduced with interactions in Bricks.

Load Font Awesome library if necessary, please adapt according to your builder:

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
  integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

HTML:

<section class="small-section">
  <h2 class="small-head">Our team members</h2>
  <div class="small-cards">
    <div class="small-wrapper">
      <div class="small-img-ctn">
        <img class="small-img" src="Media/R0004362.jpeg" />
      </div>
      <div class="small-ctn">
        <h3 class="small-name">TAKA</h3>
        <div class="small-txt">
          <p class="small-title">Marketing</p>
          <p class="small-contact">Contact</p>
        </div>
      </div>
    </div>
    <div class="small-wrapper">
      <div class="small-img-ctn">
        <img class="small-img" src="Media/R0005018.jpeg" />
      </div>
      <div class="small-ctn">
        <h3 class="small-name">KENTA</h3>
        <div class="small-txt">
          <p class="small-title">Webmaster</p>
          <p class="small-contact">Contact</p>
        </div>
      </div>
    </div>
    <div class="small-wrapper">
      <div class="small-img-ctn">
        <img class="small-img" src="Media/R0006144.jpeg" />
      </div>
      <div class="small-ctn">
        <h3 class="small-name">ICHIRO</h3>
        <div class="small-txt">
          <p class="small-title">Communication</p>
          <p class="small-contact">Contact</p>
        </div>
      </div>
    </div>
  </div>
</section>    <section class="small-section">
  <h2 class="small-head">Our team members</h2>
  <div class="small-cards">
    <div class="small-wrapper">
      <div class="small-img-ctn">
        <img class="small-img" src="Media/R0004362.jpeg" />
      </div>
      <div class="small-ctn">
        <h3 class="small-name">TAKA</h3>
        <div class="small-txt">
          <p class="small-title">Marketing</p>
          <p class="small-contact">Contact</p>
        </div>
      </div>
    </div>
    <div class="small-wrapper">
      <div class="small-img-ctn">
        <img class="small-img" src="Media/R0005018.jpeg" />
      </div>
      <div class="small-ctn">
        <h3 class="small-name">KENTA</h3>
        <div class="small-txt">
          <p class="small-title">Webmaster</p>
          <p class="small-contact">Contact</p>
        </div>
      </div>
    </div>
    <div class="small-wrapper">
      <div class="small-img-ctn">
        <img class="small-img" src="Media/R0006144.jpeg" />
      </div>
      <div class="small-ctn">
        <h3 class="small-name">ICHIRO</h3>
        <div class="small-txt">
          <p class="small-title">Communication</p>
          <p class="small-contact">Contact</p>
        </div>
      </div>
    </div>
  </div>
</section>

CSS:

.small-section {
  width: 100%;
  min-height: 100vh;
  background-color: #202020;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.small-head {
  font-family: aquatico;
  font-size: 2rem;
  color: white;
  margin-bottom: 3rem;
}
.small-cards {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.small-wrapper {
  position: relative;
  margin: 1rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.small-img-ctn {
  position: absolute;
  top: 27%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: 1;
  transition: all 1s ease;
  cursor: pointer;
}
.small-img-ctn:after {
  content: "";
  position: absolute;
  inset: 0px;
  transform: scale(1.3);
  width: 100%;
  height: 100%;
  background-color: #202020;
  filter: drop-shadow(0 0 5px #ffd64f);
  border-radius: 50%;
  z-index: -1;
}
.small-img-ctn.small-animation::after {
  animation: pulse 4s ease infinite;
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(1.1);
  }
}
.small-img-ctn.small-animation.small:after {
  animation: none;
  border: none;
  background-color: inherit;
}
.small-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.small-ctn {
  position: relative;
  width: 250px;
  height: 300px;
  background-color: #252525;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: circle(0% at 50% 36.7%);
  transition: all 2s ease;
}
.small-name {
  position: absolute;
  top: 8%;
  color: #ffd64f;
  font-size: 1.6rem;
  font-family: aquatico;
  padding: 0px 12px;
  border: 2px solid #ffd64f;
  border-radius: 25px;
}
.small-txt {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 65%;
  opacity: 1;
  color: #ffd64f;
  font-size: 1.1rem;
  font-family: helvetica neue;
}
.small-title {
  position: relative;
}
.small-title::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 8px;
  background-color: #ffd64f;
  border-radius: 5px;
}
.small-img-ctn.small {
  width: 90px;
  height: 90px;
}
.small-img-ctn.small ~ .small-ctn {
  clip-path: circle(200% at 50% 36.7%);
  filter: drop-shadow(0 0 5px #ffd64f);
}
.small-contact {
  position: relative;
  transition: all 0.3s ease;
}
.small-contact:after {
  content: "\f0e0";
  font-family: "Font Awesome 6 free";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #252525;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  font-size: 1.5rem;
  transform: translateY(20px);
  transition: all 0.5s ease;
}
.small-contact:hover:after {
  opacity: 1;
  transform: translateY(0);
}

JavaScript:

const smalls = document.querySelectorAll(".small-img-ctn");

smalls.forEach((small) => {
  small.addEventListener("click", () => small.classList.toggle("small"));
});

let cards = document.querySelectorAll(".small-img-ctn");

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      entry.target.classList.toggle("small-animation", entry.isIntersecting);
    });
  },
  {
    rootMargin: "200px",
  }
);

cards.forEach((card) => {
  observer.observe(card);
});