Вам поможет только хак с отступами. Так делаю не только я.
Добавляем к контейнеру, у которого применен 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. Решается это просто калькуляцией половины вычитаемого отступа и половины размера элемента.
Простой
