Getting Overlay / Shadow With 50% Opacity Over Images With CSS - html

Question

I'm trying to get an overlay or box shadow on top of a row of images. Then when you hover over these images, the opacity of the shadow should change from 0.5 to 0.8 for that image. I have already tried the pseudo technique suggested here:
How To Get Shadow With Certain Opacity Over Images CSS
And applied styles to the divs beneath the images as it was suggested here:
Why doesn't inset box-shadow work over images?
Me + several other people haven't been able to figure this out.
The goal is to get the images to look the same as the other three images above the row - the picture of the business presentation, the picture of the business meeting, and the picture of the businesswoman. Each of them have an initial box shadow over them with 50% opacity - then when you hover over the buttons (see my work, contact, and visit store), the opacity over the image should change from 50% to 80%. We want that same technique to be applied to the images in the row.
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;
}
JSFiddle
Any other ideas for getting the images to have an initial box shadow over them?

Answer 1

The box-shadow isn't showing because the box-shadow is on the parent of the imgs, so the imgs are covering the box-shadow. You can move the imgs behind the parent by adding 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-->