CSS"；“内边框”：悬停在div上

我正在使用引导“翻转”效果。目前，我有一个简单的流体网格，其中包含图像：

<div class="container">
<div class="row">
<div class="col-md-6 py-0 px-0 mx-0 my-0"><a href="#"><img src="http://placehold.it/900x150" class="img-fluid introImgRoll"></a></div>

<div class="col-md-6 py-0 px-0 mx-0 my-0" box><a href="#"><img src="http://placehold.it/900x150" class="img-fluid introImgRoll"></a>
</div></div>

<div class="row"><div class="col-md-6 py-0 px-0 mx-0 my-0"><a href="#"><img src="http://placehold.it/900x150" class="img-fluid introImgRoll"></a></div>

<div class="col-md-6 py-0 px-0 mx-0 my-0" box><a href="#"><img src="http://placehold.it/900x150" class="img-fluid introImgRoll"></a>
</div>
</div>

</div>

问题：

.row a {
  display: inline-block;
  position: relative;
}

.row a:hover::before {
  content: "";
  box-shadow: inset 0 0 0 5px black;
  top: 0; right: 0; bottom: 0; left: 0;
  display: block;
  position: absolute;
}

.row a:hover img {
  opacity: 0.5;
}

请看一看：尤其是当你们悬停在蓝色框上时，因为图像需要响应（流体类）边界破坏整个结构。 所以我做了一些研究，想平衡图像的5px边框和-5px边框。不幸的是，它似乎不起作用

如何解决此问题？

请尝试下面的代码

.introImgRoll:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    border: 5px solid black;
     margin: -5px 0px;

}

.introImgRoll:悬停{
不透明度：0.5；
过滤器：α（不透明度=50）；
/*适用于IE8及更早版本*/
边框：5px纯黑；
保证金：-5px0px；
}
.简介：悬停式img{
保证金：-5px；
}

.introImgRoll
没有
img
子项->它是
img
。将CSS的最后一部分更改为：

.introImgRoll:hover {
    margin: -5px;
    box-sizing: content-box; /* will solve the problem. */
}

框阴影方法：

.row a {
  display: inline-block;
  position: relative;
}

.row a:hover::before {
  content: "";
  box-shadow: inset 0 0 0 5px black;
  top: 0; right: 0; bottom: 0; left: 0;
  display: block;
  position: absolute;
}

.row a:hover img {
  opacity: 0.5;
}

尝试
框大小：填充框字体大小：0”。间隙可能是字体间隙：）Thx！它看起来很有希望，但边界很奇怪，有没有可能做到，即3px“内部边界”？目前看起来是这样的：