您可以使用其中一个伪元素（::before或::after）来实现这一点，当用户单击.card元素时，它将充当覆盖层。
基本上，我们首先将对覆盖层进行样式化，我们将使用::after伪元素，并使用-1的z-index将其放置在.card元素之后，这样覆盖层在开始时就被隐藏了。添加到.card元素，.card元素简单地将覆盖的z-index设置为更高的值（如2或999），以便覆盖出现在.card元素的顶部并充当预期的覆盖。
为了使覆盖过渡平滑，我们首先将其background-color设置为transparent，并在is-canceled类附加到.card元素时覆盖它。我们将background-color设置为红色背景（类似于rgba(255, 0, 0, .7)。使用transition属性，我们可以指示浏览器在.card元素中添加/删除is-canceled时进行平滑过渡。
为了说明这一点，下面是一个实时演示，它允许您在单击.card元素时切换覆盖：

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>

上面的演示仅用于演示目的，我们邀请您在此基础上进行构建，并以您认为合适的方式进行自定义。