Responsive design 图像上的文本悬停在响应网格中

我制作了这个响应性强的图像网格。

ol，ul{
列表样式：无；
线高：0；
}
.项目主容器{
宽度：100%；
}
.project_容器{
浮动：左；
宽度：33.3333333333333333%；
背景尺寸：封面；
溢出：隐藏；
}
.project_图像{
宽度：100%；
}
@仅介质屏幕和（最大宽度：1000px）{
/*一排两个盒子*/
.project_container{
宽度：50%；
}
}

每幅图片都代表了我所做的一个设计案例。我希望每个图像变暗，并在悬停图像中间显示一个文本标题。

我知道我所描述的效果是存在的，但我不能让它与响应网格一起工作

我希望有人能帮助我-谢谢

像这样的 不需要js。你可以根据自己的喜好调整文本的位置或颜色，这只是一个例子，让你明白了

<section class="project_main_container">
    <ul>       
        <li>
            <div class="project_container">
                <div class="project_media">
                    <img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img>
                    <p>text</p>
                    <div class="dark"></div>
                </div>
            </div>
        </li>        

    </ul>      
</section>

---

您可以使用带有一些CSS3过滤器的

：hover

来执行此操作。其思想是将标题作为绝对定位的元素添加到网格块中，并在默认情况下隐藏它。在

悬停

时，标题将应用

显示：块

，以便显示。图像将应用一个

过滤器：亮度

，使其变暗一点

HTML

<li>
    <div class="project_container">
        <div class="project_media">
            <img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img>
            <h1>Project Title</h1>
        </div>
    </div>
</li>

}

---

而工作的jQuery对这样的事情会有好处吗？谢谢你，布雷特！如果我想要彩色覆盖而不是黑色，那该怎么办？这和我的概念是一样的，只是图像在所有borwsersHuangism上都不会变暗-我的演示既快又脏，我没有包括所有必要的浏览器前缀。我的方法也只能在支持

filter

的浏览器中使用。user3071765-If可以尝试

filter

属性以获得所需的效果。或者，如果你想完全变黑，你可以将

背景色设置为#000000，然后将
img
元素的
不透明度更改为0，使其完全消失。嘿，布雷特，非常感谢你的回答。正如你所看到的，我已经在我的作品集的这一页的底部实现了这个解决方案：我如何使它在所有浏览器中工作？我对编码这件事还不熟悉，制作必要的浏览器前缀还不是我的强项之一：-）
p {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}
.project_media {
    position: relative;
}
.project_media .dark {
    display: none;
    background: black;
    opacity: 0.3;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.project_media:hover .dark {
    display: block;
}
.project_media:hover p {
    display: block;
}

.project_media:hover img {
    opacity: 0.8;

}

<li>
    <div class="project_container">
        <div class="project_media">
            <img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img>
            <h1>Project Title</h1>
        </div>
    </div>
</li>

.project_media h1 {    
    text-align:center;
    position:absolute;
    top:50%;
    width:100%;
    transform:translate(0%,-50%);
    -webkit-transform:translate(0%,-50%);
    color:#FFFFFF;
    font-family:Arial;
    text-transform:uppercase;
    display:none;

.project_container:hover img {
    filter: brightness(0.3);
    -webkit-filter:brightness(0.3);
    -moz-filter:brightness(0.3);
}

.project_container:hover h1 {
    display:block;
}