.card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;        /* ваше скругление */
}

/* 1. Оверлей с нужным z-index */
.card::before {
  content: "";
  position: absolute;
  inset: 0;                           /* то же, что top:0;right:0;bottom:0;left:0 */
  background-color: rgba(0,0,0,0.2);  /* чёрный 20% */
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 2;                         /* над картинкой */
  pointer-events: none;
  /* добавить скругление */
  border-radius: inherit;
  pointer-events: none;
}

/* 2. Сам  — спозиционируем и дадим ему слой ниже */
.card img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;                         /* ниже оверлея */
  transition: transform .3s ease;     /* чтобы работало scale */
  transform: scale(1);
  
}

/* 3. Центрированный контент — выше всего */
.card__content {
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 3;                         /* над оверлеем */
  
}

/* 4. Кнопка внутри контента чуть задержим */
.card__btn {
  display: inline-block;
  margin-top: 10px;
  opacity: 0;
  transition: opacity .3s ease .1s;
  /* z-index не нужен — она в .card__content */
}

/* 5. Hover-состояние */
.card:hover::before {
  opacity: 1;                         /* показываем оверлей */
}
.card:hover img {
  transform: scale(1.05);             /* увеличиваем картинку */
}
.card:hover .card__content {
  opacity: 1;                         /* появляются текст и обёртка */
}
.card:hover .card__btn {
  opacity: 1;                         /* появляется кнопка */
}