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

Codepen！ http://codepen.io/DylanEspey/pen/zfnpI/?editors=110

Answer 1

<强> DEMO

1）您输错了.thumnails li:before {应为.thumbnails li:before {

2）假设你想在悬停时淡出颜色〜你在tint类中设置背景：无从未在HTML中使用过吗？〜在演示中我已将此更改为适用于li。

Answer 2

http://codepen.io/anon/pen/baosd

.thumnails li:before {
     ^ b

并且.tint并不存在于HTML中，我认为您需要.thumbnails li。

Answer 3

我做了这个flexbox text overlaying on an image

flexbox text overlaying on an image

首先，您需要制作Flexbox
其次，将图像（作为背景图像）放入flexbox子项
第三，将文字叠加在图像上

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

3 个答案: