Html 获取覆盖+；带有CSS的列表项图像悬停时的深色覆盖

正在尝试重新创建覆盖/覆盖+悬停效果

在为我前面使用的效果工作的代码中，父div获取具有以下样式的类

缩略图行

：

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

将相同的技术应用于此代码：

HTML:

给我当前结果（不工作）

当我试图将

包装到divs中时，它导致每个图像都位于自己的行中（我当然不希望这样）

另外，尝试添加

z-index:2

到

。列表覆盖：：在

之后，但框阴影仍在图像下方。由于我正在为这个站点使用引导，我还尝试将所有

包装在一个容器中，然后一次将三个
包装成一行，并为它们分配引导列宽度（
col-md-4 col-sm-12
），但这也不起作用

第一步是以50%的不透明度在图像上获得长方体阴影，然后当您将鼠标悬停在其上时，将该阴影设置为80%。由于将
包装在divs中会使三列布局脱离，有没有办法用我设置的方式在
上获得框阴影

谢谢
 我可以使用
：after
和
：hover
状态的组合来创建此效果

效果如下：

默认情况下，使用
opacity:0
隐藏伪元素
：after
，但将其定位在图像的“顶部”。它具有半透明背景，颜色与您在示例
rgba（27,61,88,9）中指定的颜色相同

当用户触发使用
：hover
时，使用
不透明度：1将伪元素
：after
显示出来

添加
转换：所有1秒
到伪元素
：after
使从
不透明度：0
到
不透明度：1
在1秒的时间内发生，而不是瞬间发生


/*开始演示背景和对齐绒毛*/
身体{
背景：131418；
文本对齐：居中；
保证金：1em自动；
}
.我的形象父母{
显示：内联块；
宽度：300px；
高度：300px；
线高：300px；
文本对齐：居中；
字号：0；
}
.bg1{背景：url(https://unsplash.it/800/799);}
.bg2{背景：url(https://unsplash.it/799/800)}
.bg3{背景：url(https://unsplash.it/800/799);}
.bg4{背景：url(https://unsplash.it/801/801);}
.bg5{背景：url(https://unsplash.it/802/800);}
.bg6{背景：url(https://unsplash.it/800/802);}
.我的形象{
宽度：自动；
身高：100%；
垂直对齐：中间对齐；
背景尺寸：包含；
背景位置：中心；
背景重复：无重复；
}
/*结束演示背景和对齐绒毛*/
/*为效果启动基本CSS*/
.我的形象{
位置：相对位置；
}
.我的形象：之后{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景：rgba（27,61,88,9）；
不透明度：0；
过渡：所有1秒；
}
.我的图像：悬停：之后{
不透明度：1；
光标：指针；
}
/*结束效果的基本CSS*/


<div class="container og-grid" id="og-grid">

<div class="headline">Portfolio</div>
<div class="tagline">Responsive websites for a wide variety of clients</div>

<li class="width-1-3 list-overlay">
<a href="http://thehamburgercollection.com/" data-largesrc="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/hamburger-thumbnail.jpg" data-title="The Hamburger Collecion" data-description="The Hamburger Collection is a custom WordPress theme made for displaying a unique collection of artwork. You're able to choose from a variety of buying options - posters or banners in different sizes - through the WooCommerce plugin.">
<img src="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/hamburger-thumbnail.jpg"/>
</a>
</li>

<li class="width-1-3 list-overlay">
<a href="http://yoyomoi.com/" data-largesrc="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/yoyomoi-thumbnail.jpg" data-title="YoYoMoi" data-description="YoYoMoi is a custom WordPress theme created to act as a portfolio for advertising content from the 90's. The idea was to showcase the content in a modern, responsive setting while maintaining some of the vintage flavor from the original site.">
<img src="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/yoyomoi-thumbnail.jpg"/>
</a>
</li>

<li class="width-1-3 list-overlay">
<a href="http://dogsondutymo.org/" data-largesrc="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/dogs-thumbnail.jpg" data-title="Dogs On Duty" data-description="Dogs on Duty was made with the Avada WordPress theme. By manipulating this theme, we were able to create a fully responsive website that includes a blog, store, and informational pages for promoting service-dog equipment.">
<img src="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/dogs-thumbnail.jpg"/>
</a>
</li>

<li class="width-1-3 list-overlay">
<a href="http://gatewaywebdesign.com/" data-largesrc="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/gateway-thumbnail.jpg" data-title="Gateway Web Design (Old)" data-description="The first website for my freelance business - Gateway Web Design was a custom WordPress theme, fully responsive with a built-in blog and store. Though big and bulky, this website's functionality remains extremely powerful."><img src="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/gateway-thumbnail.jpg"/>
</a>
</li>

<li class="width-1-3 list-overlay">
<a href="http://chameleonwebsolutions.com/" data-largesrc="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/chameleon-thumbnail.jpg" data-title="Chameleon Web Solutions" data-description="Chameleon Web Solutions was the original website for my freelance business. I used custom JavaScript on the homepage to loop through images of a Chameleon, in order to give the effect that it was changing colors. The idea was that, as a designer and developer, I can adapt to a client's environment, which still is true today."><img src="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/chameleon-thumbnail.jpg"/>
</a>
</li>

<li class="width-1-3 list-overlay">
<a href="http://adriennecoleman.drawyourpets.com/" data-largesrc="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/adrienne-thumbnail.jpg" data-title="Adrienne Levin Coleman" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
<img src="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/adrienne-thumbnail.jpg"/>
</a>
</li>

<li class="width-1-3 list-overlay">
<a href="http://castaway.drawyourpets.com/" data-largesrc="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/castaway-thumbnail.jpg" data-title="Castaway Vacations" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
<img src="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/castaway-thumbnail.jpg"/>
</a>
</li>

<li class="width-1-3 list-overlay" id="last-image">
<a href="http://drawyourpets.com/" data-largesrc="http://new.gatewaywebdesign.com/wp-content/uploads/2017/06/drawyourpets_thumbnail.jpg" data-title="Draw Your Pets" data-description="Draw Your Pets LLC is a small business dedicated to turning photographs of pets into drawings. These high quality pencil drawings capture every detail of your beloved dog, cat, or horse, and present you with various framing and product options.">
<img src="http://new.gatewaywebdesign.com/wp-content/uploads/2017/07/drawyourpets_thumbnail.jpg"/>
</a>
</li>
</div>

.list-overlay {
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
z-index:2;
}

.list-overlay::after {
width: 100%;
height: 100%;   
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
}

.list-overlay:hover {
visibility: visible;
opacity: 1;
}