Html 框阴影随着缩放img在悬停时消失

我创建了一个代码笔，这样理解我的问题就更容易了。 我给图像加了一个

：在它上面加了一个
框影
，但是如果我把鼠标悬停在
图像上，它应该放大一点，确实如此，但是
框影
不应该消失，它确实


阴影可以保持在原来的位置，也可以随图像缩放，但不会消失

HTML:

将
z-index:1
添加到
:before
解决了我的问题。
我将框阴影切换为红色，当图像缩放时，我仍然可以看到它。-看来这个问题已经解决了。@paulie-d是你所改变的颜色吗？实际上我根本看不到任何阴影all@Rokin阴影是插入的，覆盖了整个图像。将rgba更改为255,0,0以查看它。我、Paulie和Bram都看到了悬停时的阴影，因此您所经历的可能是由于浏览器的怪癖。我添加了z索引。去掉它，你就可以看到我的问题了。
<a href="#0" style="height: 429px;">
  <figure><img alt="bild" src="http://lorempixel.com/410/230"></figure>
  <div>
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p>
  </div>
</a>

a {
    display: block;
    background-color: #fff;
    overflow: hidden;
    margin: 1px 0 0 1px;
    width: 490px;
    transition: all 1s ease;
    outline: none;
    text-decoration: none;
    color: #000;
}
a:hover {
  img {
    transform: scale(1.04);
  }
}
figure {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}
figure:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0px 0px 227px 0px rgba(0, 0, 0, 0.75);
    z-index: 1;
}
img {
    height: auto;
    max-width: 100%;
    vertical-align: top;
    border: 0px solid transparent;
    width: auto;
    transition: all .2s ease-in-out;
}