Не отображается внутренняя тень

Почему не получается сделать внутреннюю тень при наведении?

https://jsfiddle.net/vvyz0hty/6/

 

https://jsfiddle.net/vvyz0hty/9/

 

Оборачиваем изображение в div:

Код:

<div>
  <img src="image.jpg" alt="description" />
</div>

ну и дальше добавляем в CSS:

Код:

div {
  height: 200px;
  width: 400px;
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
}
img {
  height: 200px;
  width: 400px;
  position: relative;
  z-index: -2;
}

 

Если нужно все три картинки общей тенью внутри обрисовывать, может лучше тогда их обернуть в ещё один див и при наведении на него уже делать тень?