Выпадающая карточка внутри слайдера и overflow?

Question

[Dymok]

Есть задача сверстать слайдер с картчоками, при этом при наведении на карточку она должна увеличиваться в размере снизу (или же выпадать, по-другому), однако из-за overflow: hidden слайдера выпадающей части не видно.
Пример:

Можно ли с этим что-то сделать?

Answer 1

[Rustam Bainazarov]

Вам поможет только хак с отступами. Так делаю не только я.

Добавляем к контейнеру, у которого применен overflow: hidden, следующие стили:

padding-bottom: 1000px; // делаем отступ внутренний
margin-bottom: -1000px; // вычитаем отступ внешний, что нивелировать

В вашем случае, вроде, нет проблем, если только на CSS делать безо всякий динамики (но лучше на JS, читайте об этом под спойлером):

Читайте тут тут более подробно о решении с помощью добавления класса к контейнеру, ибо иногда так бывает нужно по какой-то причине

Если у вас планируется доп. функционал, расширяемость и т. п., то лучше сделать на универсальном решении на JS, там сложнее, но иногда это нужно.

CSS-подход может подойти, а может и нет. Вам, вроде подходит самый простой. Я потратил день на поиск универсального CSS-решения, но в итоге пришел к выводу, что на CSS сделать сие нельзя нормально, если нужны полноценные анимации, переходы при наведении и т. п. К примеру, есть какая-то задержка, если нужно менять z-index на :hover. Видимо, какие-то особенности обработки :hover у браузеров.

Если на JS: при наведении на слайд, добавляем к контейнеру, у которого применен overflow: hidden, класс с теми же стилями отсупов, что я написал выше. Класс можно добавить и к общему родителю, но стили применяем все равно именно к тому, что c overflow: hidden (это я и сделал в примере ниже).

В итоге получаем а-ля такое:

У хака есть одна проблема (решаемая): если есть элементы, типа кнопок-стрелок, на абсолютном позиционировании внутри сдвигаемого блока с oveflow: hidden, то эти элементы будут скакать, ибо вы реальные размеры блока увеличили с помощью padding-bottom. Решается это просто калькуляцией половины вычитаемого отступа и половины размера элемента.

Comments

[Dymok]

Хороший вариант, спасибо.

[Rustam Bainazarov]

Dymok, а он и единственный, если мы хотим обмануть overflow.

Не за что!

Answer 2

[VegasChickiChicki]

slick > div {
width: 100%;
height: 200px;
}
(Высоту указать какую нужно, под размер выпадающего блока.)