You can achieve this by using one of the pseudo-elements, either ::before or ::after , that will act as an overlay when the user clicks on the .card element.
Basically, we'll initially style that overlay, we'll use the ::after pseudo-element, and place it behind the .card element using z-index of -1 so that the overlay is hidden initially. When a click occurs, we add a class, let's call it is-canceled , to the .card element that simply sets the z-index of the overlay to a higher value (like 2 or 999 ) so that the overlay appears on top of the .card element and act as the intended overlay.
To make the overlay transition smoothly, we'll initially set its background-color to transparent and override that when the is-canceled class is attached to the .card element. When the is-canceled class is attached to the .card element, we'll set the background-color to a reddish background (something like rgba(255, 0, 0, .7) . Using the transition property we can instruct the browser to have a smooth transition when the is-canceled is added/removed from the .card element.
To illustrate, here's alive demo that allows you to toggle the overlay when you click on the .card element:

const card = document.querySelector('.card');

card.addEventListener('click', () => card.classList.toggle('is-canceled'));

.card {
  position: relative; /* required to correctly position the overlay */
  max-width: 300px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: 0px 0px 20px;
  gap: 10px;
  box-shadow: 0px 4px 8px rgba(41, 41, 41, 0.08);
  border-radius: 10px;
  overflow: hidden;
}

/* initial overlay styles */
.card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: transparent;
  transition: all .4s 0s ease;
  z-index: -1;
}

/* styles to be applied to the overlay when the "is-canceled" class is added */
.card.is-canceled::after {
  background-color: rgba(255, 0, 0, .7);
  z-index: 999;
}

.card-img {
  order: 0;
  display: block;
  margin-bottom: 2rem;
}

.card-title {
  align-self: center;
  margin-bottom: 1rem;
}

.card-description {
  align-self: center;
  margin: 0px 20px 1rem;
  text-align: center;
}

<div class="card">
  <img class="card-img" alt="Card Image" src="https://via.placeholder.com/250">
  <h3 class="card-title">Name Surname</h3>
  <p class="card-description">This is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long description </p>
</div>

The above demo is just for demonstration purposes and you're invited to build upon it and customize it the way you see fit.