Страница сама поднимается вверх вместе с контентом карточки. Как это пофиксить?

Question

[KaPySTaa]

При наведении курсора на карточку её название поднимается и появляется описание. Однако, если проскролить страницу вниз так, чтобы верх карточки был не виден и навести на ее курсор, то вместе с названием карточки поднимается и сама страница. Мне бы хотелось, чтобы в таком случае верх карточки просто скрывался в верху страницы, а не поднимал её. Возможно плохо объяснил, но надеюсь, что кто-то поймёт и подскажет как это исправить.

<div class="fav-item left-fav-item">
  <div class="FI-name">
    <p>Lorem ipsum dolor</p>
  </div>
  <div class="FI-description">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, soluta.</p>
  </div>
</div>

.fav-item {
  position: relative;
  width: 25%;
  height: 330px;
  border-radius: 10px;
  margin: 200px auto;
  background: url('../img/nearToBannerCards.png') no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 2px solid red;
}

.fav-item p {
  font-family: Akrobat, arial;
}

.fav-item .FI-name {
  background-color: rgb(42, 34, 51, 0.8);
  padding: 10px;
  text-align: center;
}

.fav-item .FI-name p {
  font-size: 22px;
  line-height: 22px;
}

.fav-item .FI-description {
  padding: 0 10px;
  height: 0;
  transition: 0.5s;
  background-color: rgb(42, 34, 51, 0.8);
}

.fav-item .FI-description p {
  opacity: 0;
  transition: 0.5s;
}

.fav-item:hover .FI-description {
  height: 100%;
  transition: 0.5s;
}

.fav-item:hover .FI-description p {
  color: #9d9d9d;
  opacity: 1;
  transition: 0.5s;
}