Как избавится от padding при наведении курсора?

Question

[ElvisP]

Есть блочные элементы на сайте, выглядят так:

При наведении курсора появляется тень как и нужно, но тень падает вокруг padding, а не внутри.
В итоге тень выглядит вот так:

.video {width:33.33%; float:left; padding:0 5px 10px 5px;background: transparent;}
.video:hover {position:ralative; box-shadow: 0 0 10px rgba(0,0,0,0.5);}

Как сделать тень вокруг блока а не вокруг отступа с учётом того что у него должен быть padding:0 5px 10px 5px ?

Вот наглядный пример проблемы:
хттпс://codepen.io/d1mok/pen/QogdqE

Answer 1

[eduardich]

https://codepen.io/hepik/pen/LaLxBM

Comments

[ElvisP]

Огромное спасибо!

Answer 2

[lukoie]

Погодите, с чего Вы решили что она должна падать "внутри паддинга"???
Во первых, у Вас паддинг указан у элемента без ховера.
Во вторых, если хотите тень вокруг картинки, надо обернуть в дивку, и тень у нее делать.
ЗЫЖ не ralative а relative

Comments

[ElvisP]

.video - это главная дивка в которой куча других дивок

[lukoie]

ElvisP, ну так у Вас в стилях и указан что при ховере должна быть тень у этой главной дивки. А тень ложится как раз снаружи. Так что всё правильно.
А чего ожидаете Вы добиться?