Here is html of the structure. I am using .tpl. Functionality is when a user hover overs the card it display the card-body. Issue is, the hovered card is pushing the next row. I think it’s happening, because I am using flex in card-container.

<style>
  .main-container {
    width: 100%;
    min-height: 100vh;
    height: auto;
  }

  

  .container {
    padding: 2rem 4rem;
    background-color: #edf0ff;
    border-radius: 20px;
    width: 100%;
    height: 700px;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
    position: relative;
  }

  .card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    flex: 0 0 20rem;
  }

  .card-body {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    font-family: "Poppins", sans-serif;
  }

  .card-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .card-img-overlay h5 {
    font-size: 1.5rem;
  }

  .card-img-overlay i {
    font-size: 1.5rem;
  }

  .card:hover .card-body {
    display: block;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }

  .card:hover {
    position: relative;
    z-index: 1;
    transform: translate3D(0, -1px, 0) scale(1.1);
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  }

  .card:hover .card-img-overlay {
    display: none;
  }
</style>

<main class="main-container">
  <div class="students-project-header">
    <h1>Digital Project Showcase</h1>
  </div>

  <section class="container">
    <h5 class="filter-text">
      220 out of 400 projects found for Selected filters > “Node.js” > “1st
      Year”
    </h5>

    <div class="card-container">
      <div class="card" style="width: 20rem">
        <img
          src="https://steelcase-res.cloudinary.com/image/upload/c_limit,dpr_auto,q_70,h_1024
          class="card-img-top"
          alt="..."
        />
        <div class="card-img-overlay">
          <h5 class="card-title">title</h5>
          <div class="icon-container">
            <i class="fa-solid fa-heart"></i>
          </div>
        </div>
        <div class="card-body">
          <h3 class="card-title">title</h3>
          <p class="card-text">
            Customizo is an innovative e-commerce platform designed to transform
            the way people shop for clothes. By offering a ....
          </p>
          <h6>Team Lead: Thanvi Pujari</h6>
          <div class="card-label">
            <span>E-Commerce</span>
            <span>L-2: Figma | Node | React</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

This is how it is looking right now.

This is how it should behave