带缩放悬停框阴影消失img

我创建了一个codepen，所以理解我的问题更容易。我给了图像一个:before以获得一个box-shadow，但是如果我把鼠标悬停在image上，它应该放大一点，它会这样做，但box-shadow不应该消失，它会这样做。 ..带缩放悬停框阴影消失img

的阴影可能会留在当前位置，或与图像比例，但不会消失。

HTML：

<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>

CSS：

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; 
}

来源

2015-09-18 thetailor.de

我将box-shadow切换为红色，并且在图像缩放时我仍然可以看到它。 - http://codepen.io/Paulie-D/pen/RWaBqd –

看来这已经解决了。 –

@ paulie-d是你所改变的颜色吗？ –

添加z-index: 1到:before解决我的问题。

来源

2015-09-18 11:27:51

'z-index'已经在codepen中。 –

我，保利和布拉姆都看到悬停的阴影，所以你遇到的可能是由于浏览器的怪癖。 – Hacktisch

我加了z-index。删除它，你可以看到我遇到的问题。 –

带缩放悬停框阴影消失img

回答

相关问题