kirillbelash93
@kirillbelash93
Сертифицированный сыч

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

Как сверстать при ховере "prntscr.com/plhouo" такую тень при условии что карточки находятся в слайдере и он режет эту тень слева.
  • Вопрос задан
  • 1612 просмотров
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Делать доп. обёртку поверх той, что с overflow. У этой доп обёртки делать одинаковые padding + отрицательный margin. У самого слайдера нужно убрать overflow.

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

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



~ ~ ~ ~ ~

Owl уже два года как заброшен и не обновляется. Сами разработчики советуют переходить на https://github.com/ganlanyuan/tiny-slider. Лично я использую везде Swiper.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@Nedoproger123
Ну если именно слайдер режет боковую тень, то у него стоит overflow:hidden, нужно убрать это свойство у родителя. А вообще код в студию)))
Ответ написан
Sergomen
@Sergomen
Просто делай добро и оно вернётся
Попробуй:
тотэлемент:hover{
positon:relative;
z-index:3;
}
p.s. можешь если невыйдет увеличить z-index или поменять на position:absolute
Ответ написан
kores
@kores
Помог ответ? Отметь решением!
Вот смотрите, специально родителя выделил красной рамкой, а блоки серой.

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

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

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы