Question

我有这一排图像：

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

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

最后，我想设置它，以便当您将鼠标悬停在图像上时，不透明度会下降并且顶部会显示一个链接（＆＃34;查看图像＆＃34;）。我尝试在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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: