尝试重新创建叠加/叠加+悬停效果。
在适用于我之前使用的效果的代码中，父div使用样式获取类thumbnail-row：
.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：
<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>
CSS：
.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;
}
给我当前的结果（不工作）。
当我尝试将<li>包装在div中时，它会导致每个图像都在它自己的行上（我当然不想要）。
另外，尝试将z-index: 2;添加到.list-overlay::after，但框阴影仍在图片下方。由于我正在为此站点使用bootstrap，我还尝试将所有<li>'s包装在一个容器中，然后一次包装三个<li>并为它们分配bootstrap列宽（{{ 1}}），但这也不起作用。
第一步是在50％不透明度的情况下获得图像上的方框阴影，然后将鼠标悬停在阴影上时使阴影达到80％。由于将col-md-4 col-sm-12包裹在div中会抛弃3列布局，有没有办法通过我设置的方式在<li>上获得一个方框阴影？
谢谢！
答案 0 :(得分：3)
我可以使用pseudo-element :after和:hover状态的组合来创建此效果。
效果如下：
默认情况下使用:after隐藏伪元素opacity: 0，但位于图像的“顶部”。它具有半透明背景，其颜色在示例rgba(27, 61, 88, .9);
当用户触发您使用:hover的{{3}}时，您会使用:after
opacity: 1
将transition: all ease 1s;添加到伪元素:after会使hover state从opacity: 0发送到opacity: 1，持续时间为1秒，而不是瞬时发生。
/* Start demonstration backgrounds and alignment fluff */
body {
background: #131418;
text-align: center;
margin: 1em auto;
}
.my-image-parent {
display: inline-block;
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 0;
}
.bg1 {background: url(https://unsplash.it/800/799);}
.bg2 {background: url(https://unsplash.it/799/800)}
.bg3 {background: url(https://unsplash.it/800/799);}
.bg4 {background: url(https://unsplash.it/801/801);}
.bg5 {background: url(https://unsplash.it/802/800);}
.bg6 {background: url(https://unsplash.it/800/802);}
.my-image {
width: auto;
height: 100%;
vertical-align: middle;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* End demonstration backgrounds and alignment fluff */
/* Start Essential CSS for the effect */
.my-image {
position: relative;
}
.my-image:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(27, 61, 88, .9);
opacity: 0;
transition: all ease 1s;
}
.my-image:hover:after {
opacity: 1;
cursor: pointer;
}
/* End Essential CSS for the effect */<div class="my-image-parent">
<div class="my-image bg1"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg2"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg3"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg4"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg5"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg6"></div>
</div>