将内部阴影边框设置在 div 内图像的顶部

Question

我想要在图像悬停时显示 div 内的边框，但它显示的边框在 div 的背面。我尝试使用 z-index 但也不起作用。这是我的代码 https://jsfiddle.net/ormxn1dn/2/

.thumb_images{
float:left;
width: 90px;
height: 60px;
background-color:#CCC;
text-align:center;
margin-right: 5px;
}

.thumb_images:hover{
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
    <div id="thumb0" class="thumb_images">
        <img src="http://img.yapo.cl/thumbs/70/7034297379.jpg">
    </div>
    <div id="thumb1" class="thumb_images">
        <img src="http://img.yapo.cl/thumbs/70/7015566906.jpg">
    </div>      
    <div id="thumb2" class="thumb_images">
        <img src="http://img.yapo.cl/thumbs/70/7058183501.jpg">
    </div>

Answer 1

为什么要将图像包装在 div 中？为什么要用box-shadow做边框？

您可以直接将样式应用到图像本身。然后您可以在悬停时添加边框。

如果你需要，我可以帮你写。我只需要更多有关您要实现的目标的信息？

Answer 2

你可以做...

https://jsfiddle.net/hs5g1osv/1/

.thumb_images {
    float: left;
    margin-right: 5px;
    cursor: pointer;
}

.thumb_images img {
    border: 5px solid #ccc;
    -webkit-transition: border .15s ease-in-out;
    transition: border .15s ease-in-out;
}

.thumb_images img:hover {
    border-color: #f00;
}

将内部阴影边框设置在 div 内图像的顶部

set inner shadow border to be ontop of image inside div

html

css

border

shadow