Как задать тень и увеличить блок по вертикали (на самом деле, вопрос сложнее)?

Question

[Руслан Галиев]

Имеем такую верстку - echo-group.biz/verstka/anthome/portfolio.html

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

Сделано так:
- добавляется полоса сверху с помощью тени box-shadow: 0 -15px 0 0 #eaffd0;
- добавляется полоса снизу с помощью before и для нее задается тень



А нужно, чтобы тень была у всего блока.

Здесь отображаем before без бекграунда. Задаем ему нижний и верхний бордер для визуального увеличения блока по вертикали и тень. Визуально тут все ок, но в таком случае, псевдоэлемент перекрывает контент - ссылки не кликаются, текст не выделяется.



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

Answer 1

[Андрей Б.]

https://jsfiddle.net/ba3o61nL/

Конкретно на сайте убрать before и при наведении добавлять:

box-shadow: 0 -15px 0 0 #fff, 0 15px 0 0 #fff, 15px 33px 20px 0px rgba(38, 134, 0, 0.2);
z-index: 1;

Comments

[Руслан Галиев]

Спасибо! Подскажите, тройная тень это кроссбраузерно? То есть, если браузер отображает одну тень, то он отобразит и такой бутерброд?

[Андрей Б.]

Руслан Галиев Да. Единственное, что нужно помнить тени накладываются друг на друга в такой записи и значение слева "накладывается" на значение справа и т.д.