Как решить такой вопрос с overflow: hidden?

Question

[Alice777]

https://jsfiddle.net/sunfdgkm/
Вот набросок.
Есть выезжающая из-за сетки картинка с тенью. Но из-за того что родитель хидден, левая тень само собой обрезалась.
Как обойти этот момент и сделать так, чтобы левая тень пр ховере тоже была видна?
(Ставить паддинг не вариант)

Comments

[Сергей delphinpro]

ну например так https://jsfiddle.net/sunfdgkm/2/

Answer 1

[4mobile]

.hover-me:hover .img{
     transition: 0.3s linear;
     transform: translate(10%, 0);
}

https://jsfiddle.net/4mobile/sunfdgkm/1/

Comments

[Alice777]

Это то само собой, но картинку сдвигать нельзя(она должна прилегать к контейнеру). Тень должна наложиться на границу хидден блока(контейнер)

Answer 2

[Alibek Kulseitov]

https://jsfiddle.net/sunfdgkm/3/