css - 为 Flexbox 列表中的图像添加叠加层

Question

我知道我见过类似的问题，但无论出于何种原因，我似乎无法让他们解决这些问题。它是一个图像列表，使用带有 javascript 的 flexbox 显示，以将它们交换到更大的主容器。

我想做的是在悬停时应用叠加层，但无论出于何种原因，我都无法让它工作。

<ul class="thumbnails">
    <li><a href="javascript:void(0)"><img src="img/thumbnail.jpg" class="pj_thumb" /></a></li>
    <li><a href="javascript:void(0)"><img src="img/aqua2.jpg" class="pj_thumb"/></a></li>
    <li><a href="javascript:void(0)"><img src="img/aqua3.jpg" class="pj_thumb"/></a></li>
    <li><a href="javascript:void(0)"><img src="img/aqua4.jpg" class="pj_thumb"/></a></li>
</div>

我一直在尝试的 CSS..

.thumbnails {
    padding-top: 3rem;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.thumbnails li {
    position: relative;
}

.thumnails li:before {  
    content: "";  
    display: block;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    background: rgba(0,255,255, 0.5);  
    -moz-transition: background .3s linear;  
    -webkit-transition: background .3s linear;  
    -o-transition: background .3s linear;  
    transition: background .3s linear;  
}  

.tint:hover:before {  
    background: none;  
}  

密码本! http://codepen.io/DylanEspey/pen/zfnpI/?editors=110

Answer 1

DEMO

1) 你打错了 .thumnails li:before { 应该是 .thumbnails li:before {

2) 假设您想在悬停时淡出颜色 ~ 您正在设置 background: none 在 HTML 中从未使用过的 tint 类上？ ~ 在演示中，我将其更改为适用于 li。