html - 如何在图像 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>