Circle cards

These circle cards could be used to showcase for instance your team members.

In order to achieve them you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the cards to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. So for Bricks I used a code element-to build-up the cards however I tried to cover the case Font Awesome is not loaded into your builder. For Bricks builder, please follow the HTML structure so you can add-up divs instead and add icon block (therefore Font Awesome) instead of the <i> tag.

I will start with the mandatory library to be loaded, Font Awesome in this case (in the head), then I will show respectively the HTML and CSS.

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

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.1.1/css/all.min.css"
  integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

HTML:

<div class="sld-section">
    <div class="sld-ctn">
        <div class="sld-face sld-face-1">
            <div class="sld-face-front">
                <i class="sld-face-icon fa-brands fa-apple"></i>
                <p class="sld-face-txt">TAKA</p>
                <p class="sld-face-under-txt">Marketing</p>
            </div>
        </div>
        <div class="sld-face sld-face-2">
            <img
                 class="sld-face-img"
                 src="image1.jpeg"
                 />
        </div>
    </div>
    <div class="sld-ctn">
        <div class="sld-face sld-face-1">
            <div class="sld-face-front">
                <i class="sld-face-icon fa-solid fa-pen"></i>
                <p class="sld-face-txt">ICHIRO</p>
                <p class="sld-face-under-txt">Design</p>
            </div>
        </div>
        <div class="sld-face sld-face-2">
            <img
                 class="sld-face-img"
                 src="image2.jpeg"
                 />
        </div>
    </div>
    <div class="sld-ctn">
        <div class="sld-face sld-face-1">
            <div class="sld-face-front">
                <i class="sld-face-icon fa-solid fa-house"></i>
                <p class="sld-face-txt">KEI</p>
                <p class="sld-face-under-txt">Webmaster</p>
            </div>
        </div>
        <div class="sld-face sld-face-2">
            <img class="sld-face-img" src="image3.jpeg" />
        </div>
    </div>
</div>

CSS:

:root {
  --primary: #202020;
  --secondary: #9b6bf7;
  --col-txt: #fff;
}
.sld-section {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  background-color: var(--primary);
  justify-content: center;
  min-height: 50vh;
  width: 100%;
}
.sld-ctn {
  margin: 4rem 4rem;
  width: 250px;
  height: 250px;
  position: relative;
  border-radius: 50%;
}
.sld-face {
  background-color: var(--secondary);
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  border-radius: 50%;
  border: 12px solid white;
  transition: all 0.4s;
  transition-timing-function: cubic-bezier(0, 1.4, 0.88, 1);
}
.sld-face-1 {
  z-index: 1;
  transform-origin: 45px 45px;
}
.sld-face-1:before {
  background-color: var(--col-txt);
  height: 30px;
  width: 30px;
  z-index: 1;
  position: absolute;
  left: 50%;
  bottom: 0px;
  content: "";
  transform: translateX(-50%);
  clip-path: circle(50% at 50% 100%);
}
.sld-face-1:after {
  background-color: var(--col-txt);
  height: 30px;
  width: 30px;
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 0px;
  content: "";
  transform: translateX(-50%) rotate(180deg);
  clip-path: circle(50% at 50% 100%);
}

.sld-face-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out 0.4s;
}
.sld-face-icon {
  font-size: 28px;
  color: var(--col-txt);
}
.sld-face-txt {
  font-size: 2.3rem;
  color: var(--col-txt);
}
.sld-face-under-txt {
  color: var(--col-txt);
}
.sld-face-2 {
  background-color: var(--col-txt);
  overflow: hidden;
  z-index: 0;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.sld-face-img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  transition: all 0.2s ease-in-out 0.4s;
  object-fit: cover;
}
.sld-ctn:hover .sld-face-1 {
  transform: rotate(-180deg);
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.sld-ctn:hover .sld-face-front {
  transform: rotate(180deg);
}
.sld-ctn:hover .sld-face-img {
  transform: scale(1.33);
}
@media screen and (max-width: 1119px) {
  .sld-section {
    flex-direction: column;
  }
}
@media screen and (max-width: 479px) {
  .sld-ctn {
    width: 200px;
    height: 200px;
  }
  .sld-face-txt {
    font-size: 1.5rem;
  }
}