Question

我制作了这个响应式图像网格。 http://jsfiddle.net/ZhA6a/

<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>
                </div>
            </div>
        </li>        
        <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>
                </div>

            </div>
        </li>         
        <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>
                </div>
            </div>
        </li>         
        <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>
                </div>
            </div>
        </li>        
        <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>
                </div>

            </div>
        </li>         
        <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>
                </div>
            </div>
        </li>      
    </ul>      
</section>

ol, ul {
    list-style: none;
    line-height: 0;
    }

.project_main_container {
    width: 100%;
    }

.project_container {
    float: left; 
    width: 33.3333333333333333333333333333333333333333333333333%;
    background-size:cover;
    overflow:hidden;
    }

.project_image {
    width: 100%;
    }

@media only screen and (max-width : 1000px) {
/*row of two boxes*/

.project_container{    
    width: 50%;
    }
}

每张照片代表我所做的设计案例。我想让每个图像变暗，并在悬停时在图像中间显示文本标题。

我知道我所描述的效果已经存在，但我无法使用响应式网格。

我希望有人会帮助我 - 谢谢！

Answer 1

您可以使用:hover和一些CSS3过滤器执行此操作。我们的想法是将您的标题添加为网格块中的绝对定位元素，并默认隐藏它。在hover上，标题会有一个display:block，因此它会显示出来。并且图像将应用filter:brightness以使其变暗。

<强> 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>

CSS

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

工作 demo 。

Answer 2

像这样http://jsfiddle.net/ZhA6a/1/ 不需要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>

CSS

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;

}

图像上的文字悬停在响应网格中

2 个答案: