如何在图像CSS上获得具有一定不透明度的阴影

Question

我有这样一行图片：

https://jsfiddle.net/vo1npqdx/1263/

我想做的是在所有图像的顶部获得具有这种不透明度的阴影：

box-shadow: inset 0 0 0 4000px rgba(27,61,88,.5); 

最终，我想对其进行设置，以便当您将鼠标悬停在图像上时，不透明度下降并在顶部显示一个链接("查看图像"(。我尝试将以下样式添加到我的 CSS 中：

.thumbnail-row {
    display: flex;
    margin-top: 40px;
    -webkit-box-shadow: inset 0 0 0 40000px rgba(27,61,88,.5);   
    -moz-box-shadow: inset 0 0 0 40000px rgba(27,61,88,.5);
    box-shadow: inset 0 0 0 40000px rgba(27,61,88,.5);
}
.thumbnail-image {
    display: inline-block;
    /*width: 14.286%;*/
    /*height: 50px;*/
    max-width: 100%;
    box-shadow: inset 0 0 0 4000px rgba(27,61,88,.5); 
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-box-shadow: inset 0 0 0 40000px rgba(27,61,88,.5);   
    -moz-box-shadow: inset 0 0 0 40000px rgba(27,61,88,.5);
    box-shadow: inset 0 0 0 40000px rgba(27,61,88,.5);
} 

但没有效果。请参阅最近的尝试：

https://jsfiddle.net/vo1npqdx/1264/

还有其他建议吗？谢谢。

Answer 1

您可以使用伪值来执行此操作

.thumbnail-row {
  display: flex;
}
.thumbnail-row div {
  position: relative;
}
.thumbnail-row div::after {
  content: '';
  position: absolute;
  top: 0; left: 0; 
  width: 100%;
  height: 100%;  
  box-shadow: inset 0 0 0 3000px rgba(27,61,88,.5);
}
.thumbnail-image {
  display: inline-block;
  max-width: 100%;
  }
  
@media (max-width: 425px) {
  .thumbnail-row {
    flex-direction: column;
  }
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row thumbnail-row">
    <div>
      <img class="thumbnail-image" src="http://i.imgur.com/mNoKbYK.jpg" />
    </div>
    <div>
      <img class="thumbnail-image" src="http://i.imgur.com/8b2sb03.jpg" />
    </div>
    <div>
      <img class="thumbnail-image" src="http://i.imgur.com/Ac11pRH.jpg" />
    </div>
    <div>
      <img class="thumbnail-image" src="http://i.imgur.com/DgNt5MQ.jpg" />
    </div>
    <div>
      <img class="thumbnail-image" src="http://i.imgur.com/SG0bpMU.jpg" />
    </div>
    <div>
      <img class="thumbnail-image" src="http://i.imgur.com/x1DxQwd.jpg" />
    </div>
    <div>
      <img class="thumbnail-image" src="http://i.imgur.com/YcnOqR1.jpg" />
    </div>
  </div>
  <!--end row-->
</div>