我正在尝试在一行图像的顶部获得叠加或框阴影。然后，当您将鼠标悬停在这些图像上时，阴影的不透明度应该从0.5变为0.8。我已经尝试过这里建议的伪技术：
How To Get Shadow With Certain Opacity Over Images CSS
并将样式应用于图像下方的div，如下所示：
Why doesn't inset box-shadow work over images?
我和其他几个人都无法解决这个问题。
目标是使图像看起来与行上方的其他三个图像相同 - 业务演示的图片，商务会议的图片和女商人的图片。他们每个人都有一个初始的盒子阴影，不透明度为50％ - 然后当你将鼠标悬停在按钮上时（参见我的工作，联系和访问商店），图像的不透明度应该从50％变为80％。我们希望将相同的技术应用于行中的图像。
HTML：
<div class="row thumbnail-row">
<div class="my-work-image" id="margin-left-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/hamburger-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">The Hamburger Collection</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/yoyomoi-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">YoYoMoi</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/dogs-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">Dogs On Duty</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/gateway-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">Gateway Web Design</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/chameleon-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">Chameleon Web Solutions</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/adrienne-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">Adrienne Levin Coleman</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/castaway-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">Castaway Vacations</span>
</div>
</div>
CSS：
.thumbnail-row {
display: flex;
margin-top: 40px;
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
}
.thumbnail-row div::after {
position: relative;
top: 0; left: 0;
width: 100%;
height: 100%;
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
}
.thumbnail-image {
display: inline-block;
width: 100%;
/*opacity: 0.5;*/
/*box-shadow: inset 0 0 0 4000px rgba(27,61,88,.5)!important;*/
}
.my-work-image{
position:relative;
}
.img__description_layer {
position: absolute;
top: 0;
bottom: 0;
left: 0; /*change it to 50%, if you want the text only shows in the half part */
right: 0;
background: rgba(27,61,88, 0.8);
color: #ffffff;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
text-align:center;
font-family: 'proxima_nova_ltsemibold';
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
/* transition effect. not necessary */
transition: opacity ease-in-out 0.4s, visibility ease-in-out 0.4s;
/*transition: box-shadow 0.4s ease-in-out;*/
}
.my-work-image:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.img__description {
transition: .2s;
transform: translateY(1em);
margin: 0 auto;
}
.my-work-image:hover .img__description {
transform: translateY(0);
}
#margin-left-image {
margin-left: 15px;
}
让图像在它们上面有一个初始框阴影的任何其他想法？
答案 0 :(得分：4)
box-shadow未显示，因为box-shadow位于img的父级，因此img覆盖box-shadow }。您可以通过添加img
position: relative; z-index: -1;移到父母后面
.thumbnail-row {
display: flex;
margin-top: 40px;
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
}
.thumbnail-row div::after {
position: relative;
top: 0; left: 0;
width: 100%;
height: 100%;
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
}
.thumbnail-image {
display: inline-block;
width: 100%;
/*opacity: 0.5;*/
/*box-shadow: inset 0 0 0 4000px rgba(27,61,88,.5)!important;*/
}
.my-work-image{
position:relative;
}
.img__description_layer {
position: absolute;
top: 0;
bottom: 0;
left: 0; /*change it to 50%, if you want the text only shows in the half part */
right: 0;
background: rgba(27,61,88, 0.8);
color: #ffffff;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
text-align:center;
font-family: 'proxima_nova_ltsemibold';
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
/* transition effect. not necessary */
transition: opacity ease-in-out 0.4s, visibility ease-in-out 0.4s;
/*transition: box-shadow 0.4s ease-in-out;*/
}
.my-work-image:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.img__description {
transition: .2s;
transform: translateY(1em);
margin: 0 auto;
}
.my-work-image:hover .img__description {
transform: translateY(0);
}
#margin-left-image {
margin-left: 15px;
}
.thumbnail-image {
position: relative;
z-index: -1;
}<div class="row thumbnail-row">
<div class="my-work-image" id="margin-left-image">
<img class="thumbnail-image" src="http://i.imgur.com/mNoKbYK.jpg" />
<div class="img__description_layer">
<span class="img__description">The Hamburger Collection</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="http://i.imgur.com/8b2sb03.jpg" />
<div class="img__description_layer">
<span class="img__description">YoYoMoi</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="http://i.imgur.com/Ac11pRH.jpg" />
<div class="img__description_layer">
<span class="img__description">Dogs On Duty</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="http://i.imgur.com/DgNt5MQ.jpg" />
<div class="img__description_layer">
<span class="img__description">Gateway Web Design</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="http://i.imgur.com/SG0bpMU.jpg" />
<div class="img__description_layer">
<span class="img__description">Chameleon Web Solutions</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="http://i.imgur.com/x1DxQwd.jpg" />
<div class="img__description_layer">
<span class="img__description">Adrienne Levin Coleman</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="http://i.imgur.com/YcnOqR1.jpg" />
<div class="img__description_layer">
<span class="img__description">Castaway Vacations</span>
</div>
</div>
</div><!--end row-->