Sliding cards

This animation is displaying some cards with an animated SVG.

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 (be careful with the buttons) 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 margin/padding/button reset has been applied and the font is not defined.

HTML:

<section class="sld-cards-section">
  <div class="sld-cards-ctn">
    <div class="sld-cards-img-ctn">
      <svg class="sld-cards-svg">
        <circle cx="60" cy="60" r="55"></circle>
      </svg>
      <img
        src="/Animations/Sliding cards/Pictures/agence-kokoro-R0006144.jpeg"
        alt=""
        class="sld-cards-img"
      />
    </div>
    <div class="overflow">
      <div class="sld-cards-txt-ctn">
        <h3 class="sld-cards-head">TANAKA</h3>
        <p class="sld-cards-txt">Marketing</p>
        <div class="sld-cards-social-ctn">
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-facebook"></i
          ></a>
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-instagram"></i
          ></a>
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-twitter"></i
          ></a>
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-pinterest"></i
          ></a>
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-youtube"></i
          ></a>
        </div>
      </div>
    </div>
  </div>
  <div class="sld-cards-ctn">
    <div class="sld-cards-img-ctn">
      <svg class="sld-cards-svg">
        <circle cx="60" cy="60" r="55"></circle>
      </svg>
      <img
        src="/Animations/Sliding cards/Pictures/agence-kokoro-R0004362.jpeg"
        alt=""
        class="sld-cards-img"
      />
    </div>
    <div class="overflow">
      <div class="sld-cards-txt-ctn">
        <h3 class="sld-cards-head">RYU</h3>
        <p class="sld-cards-txt">Webmaster</p>
        <div class="sld-cards-social-ctn">
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-facebook"></i
          ></a>
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-instagram"></i
          ></a>
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-twitter"></i
          ></a>
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-pinterest"></i
          ></a>
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-youtube"></i
          ></a>
        </div>
      </div>
    </div>
  </div>
  <div class="sld-cards-ctn">
    <div class="sld-cards-img-ctn">
      <svg class="sld-cards-svg">
        <circle cx="60" cy="60" r="55"></circle>
      </svg>
      <img
        src="/Animations/Sliding cards/Pictures/agence-kokoro-67.jpeg"
        alt=""
        class="sld-cards-img"
      />
    </div>
    <div class="overflow">
      <div class="sld-cards-txt-ctn">
        <h3 class="sld-cards-head">KENTA</h3>
        <p class="sld-cards-txt">Design</p>
        <div class="sld-cards-social-ctn">
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-facebook"></i
          ></a>
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-instagram"></i
          ></a>
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-twitter"></i
          ></a>
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-pinterest"></i
          ></a>
          <a href="" target="_blank"
            ><i class="fa-brands fa-square-youtube"></i
          ></a>
        </div>
      </div>
    </div>
  </div>
</section>

CSS:

.sld-cards-section {
  display: flex;
  flex-direction: column;
  min-height: 50vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: #202020;
}
.sld-cards-ctn {
  margin-bottom: 2rem;
  width: 320px;
  height: 120px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 2rem;
}
.sld-cards-img-ctn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem;
}
.sld-cards-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.65, 0.2, 0.3, 1.31) 0.4s;
  z-index: 1;
}
.overflow {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: box-shadow 0.3s cubic-bezier(0.65, 0.2, 0.3, 1.31) 0.4s;
  border-radius: 2rem;
}
.sld-cards-txt-ctn {
  position: relative;
  color: white;
  padding: 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  transform: translateX(-200%);
  transition: transform 0.5s cubic-bezier(0.65, 0.2, 0.18, 1.97);
}
.sld-cards-txt {
  margin-bottom: 0.5rem;
}
.sld-cards-social-ctn i {
  color: white;
  font-size: 1.4rem;
  margin: 0.2rem;
  transition: all 0.2s ease;
}
.sld-cards-social-ctn i:hover {
  color: #9b69f7;
  transform: scale(1.2);
  cursor: pointer;
}
.sld-cards-ctn:hover .overflow .sld-cards-txt-ctn {
  transform: translateX(0);
}
.sld-cards-ctn:hover .overflow {
  box-shadow: 7px 7px 14px #151515, -7px -7px 14px #2b2b2b;
}
.sld-cards-svg {
  position: absolute;
  top: -10px;
  left: -10px;
}
.sld-cards-svg circle {
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: #9b69f7;
  stroke-width: 8px;
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  transition: all 0.7s linear;
}
.sld-cards-ctn:hover .sld-cards-svg circle {
  stroke-dashoffset: 0;
}