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

    @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, чтобы выяснять такие подробности.
    Ответ написан
    Комментировать