<div class="grid">
  
  <div class="card">
    <div class="card__body">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident autem, vitae culpa nemo cum at cupiditate, dolorum aliquam voluptas sapiente impedit omnis totam aliquid dolores porro animi nobis tempore voluptates.
    </div>
    <div class="card__box">
      <div class="card__footer">
        Fuga qui esse, veniam placeat amet provident cum quibusdam sequi expedita suscipit.
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card__body">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident autem, vitae culpa nemo cum at cupiditate, dolorum aliquam voluptas sapiente impedit omnis totam aliquid dolores porro animi nobis tempore voluptates.
    </div>
    <div class="card__box">
      <div class="card__footer">
        Fuga qui esse, veniam placeat amet provident cum quibusdam sequi expedita suscipit.
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card__body">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident autem, vitae culpa nemo cum at cupiditate, dolorum aliquam voluptas sapiente impedit omnis totam aliquid dolores porro animi nobis tempore voluptates.
    </div>
    <div class="card__box">
      <div class="card__footer">
        Fuga qui esse, veniam placeat amet provident cum quibusdam sequi expedita suscipit.
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card__body">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident autem, vitae culpa nemo cum at cupiditate, dolorum aliquam voluptas sapiente impedit omnis totam aliquid dolores porro animi nobis tempore voluptates.
    </div>
    <div class="card__box">
      <div class="card__footer">
        Fuga qui esse, veniam placeat amet provident cum quibusdam sequi expedita suscipit.
      </div>
    </div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.card {
  --bdrs: 15px;
  --transition-dur: 250ms;
  position: relative;
  z-index: 0;
  transition: z-index var(--transition-dur) step-end;
  user-select: none;
}

.card:hover {
  z-index: 1;
  transition-timing-function: step-start;
}

.card__body {
  padding: 15px;
  background-color: #fff;
  border-radius: var(--bdrs);
}

.card__box {
  position: absolute;
  inset: 0;
  background-color: #fff;
  border-radius: var(--bdrs);
  transition: filter var(--transition-dur);
  filter: drop-shadow(0 0 1px #02a7);
  z-index: -1;
}

.card:hover .card__box {
  filter: drop-shadow(0 0 8px #02a7);
}

.card__footer {
  position: absolute;
  top: calc(100% - var(--bdrs));
  left: 0;
  padding: 15px;
  background-color: inherit;
  border-radius: 0 0 var(--bdrs) var(--bdrs);
  transform: translateY(-100%);
  transition: transform var(--transition-dur);
}

.card:hover .card__footer {
  transform: translateY(0);
}