Как увеличить картинку в слайдере?

Question

[AlexGlinskiy]

Всем привет! Есть Swiper слайдер, в слайдах картинки. При наведении на картинки они должны увеличиваться. Из за того, что в слайдере прописано overflow: hidden; картинка обрезается.

Пробывал разные варианты, но не получатся сделать, чтобы картинка было поверх всего.

Comments

[xdevelx]

Можно например вспомнить, что есть раздельные свойства overflow-x overflow-y. Для swiper-container hidden оставить только для overflow-x.

[goshaLoonny]

xdevelx, И что же толку с этого? верх и них картинки обрезаться будет.

Answer 1

[xdevelx]

https://codepen.io/xdevelx/pen/MWJLyqa

Comments

[AlexGlinskiy]

Спасибо! Так и делал. Думал может есть другие спрособы.

[xdevelx]

AlexGlinskiy,

Пробывал разные варианты, но не получатся сделать, чтобы картинка было поверх всего.

Спасибо! Так и делал. Думал может есть другие спрособы.

То не получается сделать, то так и делали. Зачем ещё варианты, если есть рабочий вариант? Вертикальные внутренние отступы у контейнера слайдера можно делать. Вот отступы между слайдами не стоит делать. Для этого есть параметры слайдера.

[AlexGlinskiy]

xdevelx, Просто если делать у swiper-container padding, то получаются большие отступы и пришлось обратным margin-ом делать. Мне это не нравилось и думал может есть другое решение.

[xdevelx]

AlexGlinskiy, Так если картинка должна увеличиваться, то и должно быть свободное пространство по вертикали. В противном случае она будет собой перекрывать вышестоящие и нижестоящие элементы.