<ul class="cards">
  <li class="card">
    <button class="delete-btn">
      <img src="Trash_font_awesome.svg" alt="close button">
      <span class="sr-only">Delete</span>
    </button>
  </li>
  <li class="card">
    <button class="delete-btn">
      <img src="Trash_font_awesome.svg" alt="close button">
      <span class="sr-only">Delete</span>
    </button>
  </li>
  <li class="card">
    <button class="delete-btn">
      <img src="Trash_font_awesome.svg" alt="close button">
      <span class="sr-only">Delete</span>
    </button>
  </li>
  <li class="card">
    <button class="delete-btn">
      <img src="Trash_font_awesome.svg" alt="close button">
      <span class="sr-only">Delete</span>
    </button>
  </li>
</ul>

/* Applied transition */
.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete;
}

.fade-out {
  opacity: 0;
  display: none;
}

/* Etc. */

@layer base {
  body {
    display: grid;
    height: 90dvh;
    place-items: center;
    padding: 2rem;
  }
  
  .cards {
    padding: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 2rem;
    max-width: 1000px;
  }
  
  .card {
    width: 100%;
    aspect-ratio: 2/3;
    display: block;
    background-color: tan;
    position: relative;
    border-radius: 1rem;
    max-width: 220px;
  }
  
  .card:nth-child(2) {
    background-color: khaki;
  }
  
  .card:nth-child(3) {
    background-color: thistle;
  }
  
  .card:nth-child(4) {
    background-color: wheat;
  }

  .delete-btn {
    position: absolute;
    bottom: -0.75rem;
    right: -0.75rem;
    width: 3rem;
    height: 3rem;
    padding: 0.5rem;
    border: 4px solid;
    border-radius: 100%;
    background: steelblue;
    color: white;
    
    & img {
      filter: invert();
    }
  }
  
  .sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }
}

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    btn.parentElement.classList.add('fade-out');
  })
})