Gromov21

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

Проще всего сделать через max-height и opacity. Смысл такой - скрываешь блок с кнопками, а при наведении на .card делаешь ему плавное появление. Вот пример:

.card {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 15px;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,.1);
  z-index: 10;
}

.card_bottom {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.card:hover .card_bottom {
  max-height: 120px; /* чуть больше, чем высота блока */
  opacity: 1;
  pointer-events: auto;
}

.card_btn {
  padding: 10px 15px;
  border-radius: 6px;
  background: #ffd500;
  border: none;
  cursor: pointer;
}

За счёт max-height карточка сама увеличивается по высоте, а opacity делает появление мягким. Главное - поставить overflow: hidden, чтобы ничего не вылазило при сворачивании.
Если хочешь чуть возвышение над остальными при ховере - добавь z-index и лёгкий transform: translateY(-2px);.
Так получается почти как на твоей картинке - кнопки плавно выезжают, карточка чуть поднимается.

Ошибка часто появляется, когда Outline не может запустить свой виртуальный сетевой адаптер. Обычно помогает простая переустановка программы - вместе с драйверами она подтянет нужный интерфейс. Если не помогло, зайди в сетевые подключения и проверь, есть ли там адаптер типа TAP-Windows. Если его нет - ставь заново, если есть, то попробуй переименовать в outline-tap0.