Product cards

This animation is displaying a card that can be used as a basis to show products as exemple.

In order to achieve it 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 animation to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For Bricks builder, please follow the HTML/CSS structure so you can add-up divs and give them CSS (be careful with the buttons and icons) instead of putting it into the code block in order to avoid FOUC as the code block 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 reset has been applied and the font is not defined.

HTML:

<section class="proc-section">
  <div class="proc-ctn">
    <div class="proc-front">
      <img class="proc-img" src="images/P1150541.jpg" alt="tokyo" />
      <p class="proc-fr-price">$99</p>
      <p class="proc-fr-title">SUBURB</p>
    </div>
    <div class="proc-back">
      <a class="proc-cart">ADD TO CART</a>
      <a class="proc-fr-more">Info</a>
    </div>
  </div>
  <div class="proc-ctn">
    <div class="proc-front">
      <img class="proc-img" src="images/R0000553.jpg" alt="tokyo" />
      <p class="proc-fr-price">$99</p>
      <p class="proc-fr-title">COUNTRY<br />SIDE</p>
    </div>
    <div class="proc-back">
      <a class="proc-cart">ADD TO CART</a>
      <a class="proc-fr-more">Info</a>
    </div>
  </div>
  <div class="proc-ctn">
    <div class="proc-front">
      <img class="proc-img" src="images/R0012138.jpg" alt="tokyo" />
      <p class="proc-fr-price">$99</p>
      <p class="proc-fr-title">CITY</p>
    </div>
    <div class="proc-back">
      <a class="proc-cart">ADD TO CART</a>
      <a class="proc-fr-more">Info</a>
    </div>
  </div>
</section>

CSS:

.proc-section {
  padding: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #202020;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
}
.proc-ctn {
  position: relative;
  margin: 2rem;
  width: 250px;
  height: 300px;
  perspective: 300px;
  border-radius: 0.4rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
    rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.proc-front {
  position: relative;
  padding: 1rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #202020;
  justify-content: center;
  border-radius: 0.4rem;
  gap: 1rem;
  z-index: 1;
}
.proc-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.4rem;
}
.proc-fr-price {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.3rem 0.6rem;
  z-index: 4;
  color: white;
  font-size: 1rem;
  border-radius: 0.4rem;
  background-color: #9b6bf7;
}
.proc-fr-more {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.3rem 0.6rem;
  z-index: 4;
  color: white;
  font-size: 1rem;
  border-radius: 0.4rem;
  background-color: #9b6bf7;
  cursor: pointer;
  transition: all 0.1s linear;
}
.proc-fr-title {
  padding: 0.3rem 0.6rem;
  z-index: 1;
  color: white;
  line-height: 1;
  font-size: 1.4rem;
  border-radius: 0.4rem;
  text-align: center;
  background-color: #9b6bf7;
}
.proc-back {
  position: absolute;
  padding: 1rem;
  top: 0;
  width: 100%;
  height: 99.99%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  background-color: rgba(255, 255, 255, 0.2);
  justify-content: center;
  border-radius: 0.4rem;
  transform: rotateY(180deg) translateX(100%);
  transform-origin: right;
  transition: all 0.3s linear 0.3s;
}
.proc-cart {
  padding: 0.3rem 0.6rem;
  color: white;
  font-size: 0.8rem;
  border-radius: 0.4rem;
  background-color: #9b6bf7;
  cursor: pointer;
  transition: all 0.1s linear;
  box-shadow: 0 0 0 3px white, 0 0 0 6px #9b6bf7;
}
.proc-ctn:hover {
  animation: pulse 0.3s linear forwards;
}
@keyframes pulse {
  50% {
    transform: scale(0.8);
  }
  25%,
  75% {
    transform: scale(1.1);
  }
}
.proc-ctn:hover .proc-back {
  animation: rotate 0.3s linear 0.3s forwards;
}
@keyframes rotate {
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotateY(0deg);
    z-index: 2;
  }
}
.proc-cart:active {
  transform: scale(0.95);
}
.proc-fr-more:active {
  transform: scale(0.95);
}
@media only screen and (max-width: 991px) {
  .proc-section {
    flex-direction: column;
  }
}