Как сверстать такую тень?

Question

[Кирилл Белаш]

Как сверстать при ховере "prntscr.com/plhouo" такую тень при условии что карточки находятся в слайдере и он режет эту тень слева.

Comments

[Rustam Bainazarov]

Делать доп. обёртку поверх той, что с overflow. У этой доп обёртки делать одинаковые padding + отрицательный margin. У самого слайдера нужно убрать overflow.

Update. Написал ответ с примером.

[Кирилл Белаш]

Рустам Байназаров, учитывая что owl slider генерит все блоки сам делать доп обертку еще тот гемор

[Rustam Bainazarov]

kirillbelash93, да, но что делать. Я лично Owl не использую вообще. Я только Swiper.

[Nedoproger123]

Рустам Байназаров, я глянул owl помойму можно покопать в эту сторону https://owlcarousel2.github.io/OwlCarousel2/demos/...

[Rustam Bainazarov]

Nedoproger123, это немного для другого. Тогда будет проблема с тем, что те слайды, что с самого края должны быть, с этого края не будут.

Это опция для упрощения создания центрированных слайдеров, как в примере, у которых видны «хвосты» других слайдов по бокам.

[Кирилл Белаш]

Рустам Байназаров, да слайдер сразу жмет и получается не норма

[Rustam Bainazarov]

kirillbelash93, посмотрите, написал ответ.

Answer 1

[Rustam Bainazarov]

Делать доп. обёртку поверх той, что с overflow. У этой доп обёртки делать одинаковые padding + отрицательный margin. У самого слайдера нужно убрать overflow.

Если размер тени превышает размер отступа между слайдов, данный метод не подойдёт. Вам тогда надо будет делать модификацию слайдера, чтобы те слайды, что не на «сцене», были в opacity: 0 или что-то подобное.

Для вашего же случая это более чем подойдёт. На скорую руку с телефона:



~ ~ ~ ~ ~

Owl уже два года как заброшен и не обновляется. Сами разработчики советуют переходить на https://github.com/ganlanyuan/tiny-slider. Лично я использую везде Swiper.

Answer 2

[Nedoproger123]

Ну если именно слайдер режет боковую тень, то у него стоит overflow:hidden, нужно убрать это свойство у родителя. А вообще код в студию)))

Comments

[Кирилл Белаш]

Я убирал у него overflow:hidden тогда я получаю скролл снизу

[Кирилл Белаш]

ссылка

[Nedoproger123]

kirillbelash93, без того что именно там творится и подсказать почти нельзя. Покажите как этой выглядит)

[Кирилл Белаш]

Nedoproger123, я кинул ссылку выше

[Nedoproger123]

kirillbelash93, попробуй поставить
.owl-carousel .owl-stage {
padding: 0 10px;
}

[Nedoproger123]

kirillbelash93, напиши потом вышло или нет, вроде должно сработать с этим слайдером

[Кирилл Белаш]

Nedoproger123, к сожалению вот prntscr.com/plhy0w

[Nedoproger123]

kirillbelash93, хмм после перезагрузки страницы по идее он должен был уменьшить блоки. ща...

[Nedoproger123]

kirillbelash93, копать сюда. из этого можно подравнять края как надо https://owlcarousel2.github.io/OwlCarousel2/demos/...

Answer 3

[Sergo Zar]

Попробуй:
тотэлемент:hover{
positon:relative;
z-index:3;
}
p.s. можешь если невыйдет увеличить z-index или поменять на position:absolute

Comments

[Nedoproger123]

Там проблема в том что overflow:hidden порежет все где заканчивается родитель. Z-index не проктит(

Answer 4

[Глеб Варганов]

Вот смотрите, специально родителя выделил красной рамкой, а блоки серой.

Обратите внимание, что при ховере тень выходит за пределы родителя.

Пример на jsfiddle.net:

Comments

[Nedoproger123]

Там проблема в том что overflow:hidden порежет все где заканчивается родитель.

[Глеб Варганов]

Nedoproger123, ну так его убрать же можно :-)

[Кирилл Белаш]

Глеб Варганов, не вариант иначе весь смысл слайдера рушится

[Rustam Bainazarov]

Overflow нет, поэтому тень и выходит. У всех слайдеров на обёртке overflow в силу особенностей реализации.

Поэтому будет так:

[Глеб Варганов]

Может тогда padding добавить к родителю по размеру тени? Я думаю можно использоваться, как вариант решения вопроса...

[Rustam Bainazarov]

kirillbelash93, почитайте мой комментарий под ответом. Я таким образом с данной проблемой справляюсь постоянно.

[Глеб Варганов]

Рустам Байназаров, да, логично!