Подскажите как реализовать анимацию в html с hover эффектом

Question

Подскажите пожалуйста, требуется реализовать анимацию при наведение на карточку. В какую сторону копать, даже не представляю. Может кто сталкивался с таким и даст напутствие начальное хотя бы)) Буду благодарен

Ссылка на видео с примером анимации

Answer 1

попробуйте поигратся со skew

.item {
  background: black;
  width: 50px;
  height: 70px;
  margin: 0 -2px;
  transform: skew(0, -37deg);
  transition: 0.3s ease;
  border: 1px solid red;
}

.item:hover {
  transform: skew(0, 0);
  width: 100px;
  margin: 0 5px;
}
.wrap {
  display: flex;
}

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

БЛОГ НА HUSL

Подскажите как реализовать анимацию в html с hover эффектом

Ответы (1 шт):