Growing cards

These growing cards have specific design and animation, they have an image growing effect on hover.

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. For Bricks builder, please follow the HTML/CSS structure so you can add-up divs, add icon element (therefore Font Awesome) instead of the <i> tag, and give them CSS instead of putting them into the code element in order to avoid FOUC as the code element will be 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 and the container div doesn’t have any background color.

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="gr-section">
  <div class="gr-cards">
    <i class="gr-icon fa-solid fa-heart"></i>
    <div class="gr-reading">
      <i class="gr-reading-icon fa-solid fa-clock"></i>
      <p class="gr-reading-text">5min</p>
    </div>
    <img class="gr-image" src="images/agence-kokoro-R0000553.jpg" />
    <div class="gr-bottom">
      <p class="gr-category">Landscape</p>
      <p class="gr-title">Mitani Monogatari</p>
      <p class="gr-author">Me</p>
    </div>
  </div>
  <div class="gr-cards">
    <i class="gr-icon fa-solid fa-heart"></i>
    <div class="gr-reading">
      <i class="gr-reading-icon fa-solid fa-clock"></i>
      <p class="gr-reading-text">5min</p>
    </div>
    <img class="gr-image" src="images/agence-kokoro-R0012138.jpg" />
    <div class="gr-bottom">
      <p class="gr-category">Street photography</p>
      <p class="gr-title">Sanja Matsuri</p>
      <p class="gr-author">Me</p>
    </div>
  </div>
  <div class="gr-cards">
    <i class="gr-icon fa-solid fa-heart"></i>
    <div class="gr-reading">
      <i class="gr-reading-icon fa-solid fa-clock"></i>
      <p class="gr-reading-text">5min</p>
    </div>
    <img class="gr-image" src="images/agence-kokoro-R0002745.jpg" />
    <div class="gr-bottom">
      <p class="gr-category">Landscape</p>
      <p class="gr-title">Hachibusekogen</p>
      <p class="gr-author">Me</p>
    </div>
  </div>
</div>

 CSS:

.gr-section {
  padding: 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #202020;
  justify-content: center;
  min-height: 75vh;
  width: 100%;
}
.gr-cards {
  display: flex;
  position: relative;
  overflow: hidden;
  padding-bottom: 175px;
  margin: 2rem;
  width: 350px;
  height: 500px;
  border-radius: 15px;
  background-color: white;
  transition: all 0.4s ease;
  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;
}
.gr-icon {
  display: flex;
  position: absolute;
  color: white;
  font-size: 22px;
  top: 15px;
  left: 15px;
  z-index: 1;
  opacity: 0;
  transition: all 0.5s ease;
}
.gr-reading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 15px;
  right: 15px;
  opacity: 0;
  z-index: 1;
  transition: all 0.5s ease;
}
.gr-reading-icon {
  padding-right: 5px;
  color: white;
  font-size: 22px;
}
.gr-reading-text {
  color: white;
}
.gr-image {
  width: 100%;
  height: 100%;
  transition: all 0.4s ease;
  object-fit: cover;
}
.gr-bottom {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 15px;
  bottom: 40px;
  z-index: 1;
  width: 100%;
  transition: all 0.5s ease;
}
.gr-category {
  color: #bb271d;
  font-size: 1.3rem;
  font-weight: 700;
  transition: all 0.5s ease;
}
.gr-title {
  margin-top: 10px;
  margin-bottom: 10px;
  color: black;
  font-size: 1.6rem;
  transition: all 0.5s ease;
}
.gr-author {
  color: dimgray;
  transition: all 0.5s ease;
}
.gr-cards:hover {
  scale: 1.1;
  padding-bottom: 0%;
  box-shadow: rgba(0, 0, 0, 0.8) 0px 2px 4px,
    rgba(0, 0, 0, 0.6) 0px 7px 13px -3px, rgba(0, 0, 0, 0.4) 0px -3px 0px inset;
}
.gr-cards:hover .gr-icon,
.gr-cards:hover .gr-reading {
  opacity: 1;
}
.gr-cards:hover .gr-category {
  color: #940000;
}
.gr-cards:hover .gr-title,
.gr-cards:hover .gr-author {
  color: white;
}
.gr-cards:hover .gr-image {
  opacity: 0.7;
}
@media only screen and (max-width: 1350px) {
  .gr-section {
    flex-direction: column;
  }
}
@media only screen and (max-width: 479px) {
  .gr-cards {
    height:380px;
    width: 320px;
  }
}