Как сделать эффект при наведении как на этом сайте?

Question

[dimdim07]

Подскажите, как реализовать такой эффект в декстопной версии, как на этом сайте:
ссылка
При наведении на блок, он увеличивается на длину текста (ссылок)
Спасибо!

Answer 1

[alexalexes]

До наведения на блок стили выглядят так:

#GFCatalog .categories-item__card-wrapper {
    overflow: hidden;
    box-shadow: 0 2px 6px 0 rgba(188, 191, 185, 0.5);
    border-radius: 10px;
    max-height: 260px;
    padding: 10px 15px;
    position: absolute;
    width: 100%;
    background-color: white;
    transition: max-height 0.2s ease;
}

А когда hover, то корректируются эти свойства:

#GFCatalog .categories-item__card-wrapper:hover {
    max-height: 1000px;
    z-index: 10;
    transition: max-height 1s linear, box-shadow .3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15), 0 3px 5px rgba(0, 0, 0, 0.1);
}

Чтобы работал эффект, вам нужно изменить max-height и z-index (чтобы блок не заехал под другой соседний блок). Изменение transition, box-shadow - декоративные примочки.
PS: Используйте инструмент :hov на вкладке Стили в панели разработчика F12, чтобы выяснять такие подробности.