css - 将内部阴影边框设置为位于 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

你可以做...

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