/* Карточка */
.card {
  position: relative;
  width: 768px;              /* задай реальный размер карточки */
  height: 348px;
  background: url("0.svg") no-repeat center / cover;
}

/* Лайк поверх карточки */
.heart {
  position: absolute;
  right: -8px;
  bottom: -22px;

  width: 100px;
  height: 100px;
  background: url("3.svg") no-repeat;
  background-position: 0 0;
  cursor: pointer;

    transform: scale(0.45);          /* ← масштаб */
}

/* hover — кадр 1 */
.heart:not(.is-active):hover {
  background-position: -100px 0;
}

/* актив — анимация */
.heart.is-active {
  animation: heart-like 1s steps(27) forwards;
}

/* hover не перебивает актив */
.heart.is-active:hover {
  background-position: -2900px 0;
}

/* анимация кадров 2..29 */
@keyframes heart-like {
  from {
    background-position: -200px 0;
  }
  to {
    background-position: -2900px 0;
  }
}

/* Центровка для демо */
.placement {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

body {
  background: #fff;
}