如何将图像和文本组合在一起，以便它们可以答案

【问题标题】：how can I group together an image and it's text so that they can s如何将图像和文本组合在一起，以便它们可以
【发布时间】：2015-01-26 15:53:15
【问题描述】：

下面（jsfiddle）是一个 css + html 代码，展示了许多灰度图像和它的标题。从功能上讲，将鼠标悬停在图像上时，图像的真实颜色会恢复，并且标题会被副标题和细节所取代。通过 CSS，这是通过使用 :hover 来实现的。

效果很好，似乎没有显示任何问题/故障，但是当光标悬停在标题上时，图像会恢复为灰度，但会用其副标题和细节替换标题。我想知道1）如何将图像和文本都设为一个元素，2）如何将淡入淡出效果添加到文本中，最后3) 将鼠标悬停在图像上时，图像是否有可能保持彩色（不是灰度）？

这是我设置的jsfiddle。请让我知道我是否可以进行其他参考/资源/修改以进行澄清。提前致谢！

——顺便说一句，感恩节快乐！我非常感谢 StackExchange 令人惊叹的社区 — 在过去的几个月里，你们给了我很多帮助，我要感谢你们的慷慨。我希望有一天我能擅长编码，从而能够通过帮助他人来回馈社会。干杯！

CSS

section.image ul {
    overflow: hidden;
    clear: both;
    padding: 0;
    margin: 5% 0 0 0;
    width: 100%;
}
section.image li {
    display: block;
    list-style-type: none;
    list-style-image: none;
    text-align: center;
    margin-bottom: 100px;
    position: relative;
}
section.image li img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1) brightness(0.9);
    -moz-filter: grayscale(1) brightness(0.9);
    -o-filter: grayscale(1) brightness(0.9);
    -ms-filter: grayscale(1) brightness(0.9);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    max-width: 100%;
    height: auto;
}
section.image li img:hover {
    filter: grayscale(0.1) brightness(1);
    -webkit-filter: grayscale(0.1) brightness(1);
    -moz-filter: grayscale(0.1) brightness(1);
    -o-filter: grayscale(0.1) brightness(1);
    -ms-filter: grayscale(0.1) brightness(1);
}
section.image li span.caption {
    display: none;
    position: absolute;
    text-align: center;
    margin-top: 18px;
    width: 100%;
    height: auto;
}
section.image li:hover span.caption {
    display: block;
}
section.image li span.caption.label {
    display: block;
    font-size: 23px;
    margin-top: 23px;
    font-family:'Phenotype S', times;
}
section.image li:hover span.caption.label {
    display: none;
}

HTML

<section class="image">
    <ul>
        <li>
            <img width="80%" height="100%" src="http://asset2.itsnicethat.com/system/files/022013/5114e1305c3e3c262a000631/img_col_main/3.-Nov.-2008.jpg?1360323002" class="attachment-full" alt="selected_image" title="selected_image" /> 
            <span class="caption label">Title</span>
            <span class="caption">Subtext<br/>Detail</span>
        </li>
        <li>
            <img width="30%" height="100%" src="http://asset2.itsnicethat.com/system/files/022013/5114e1375c3e3c262a000632/img_col_main/6.-Nov.-08.jpg?1360323004" class="attachment-full" alt="selected_image" title="selected_image" />
            <span class="caption label">Title</span>
            <span class="caption">Subtext<br/>Detail</span>
        </li>
        <li>
            <img width="70%" height="100%" src="http://asset2.itsnicethat.com/system/files/022013/5114e13a5c3e3c22a3000bdf/img_col_main/10.-Nov.-08-(reverse).jpg?1360323005" class="attachment-full" alt="selected_image" title="selected_image" />
            <span class="caption label">Title</span>
            <span class="caption">Subtext<br/>Detail</span>
        </li>
        <li>
            <img width="90%" height="100%" src="http://asset1.itsnicethat.com/system/files/022013/5114e13d5c3e3c22a3000bfc/img_col_main/10.-Nov.-08.jpg?1360323006" class="attachment-full" alt="selected_image" title="selected_image" /> 
            <span class="caption label">Title</span>
            <span class="caption">Subtext<br/>Detail</span>
        </li>
    </ul>
</section>

【问题讨论】：

标签： html css image text hover

【解决方案1】：

将您的边距更改为填充（如果您考虑盒子模型的工作原理，这应该是有道理的）。我还将li image:hover 更改为li:hover img

http://jsfiddle.net/j1r7es4j/2/

body {
    width: 40%;
    height: 100%;
    margin: 0 auto;
    font: 100%;
    color: #222222;
}

section.image ul {
    overflow: hidden;
    clear: both;
    padding: 0;
    margin: 5% 0 0 0;
    width: 100%;
}
section.image li {
    display: block;
    list-style-type: none;
    list-style-image: none;
    text-align: center;
    padding-bottom: 100px;
    position: relative;
}
section.image li img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1) brightness(0.9);
    -moz-filter: grayscale(1) brightness(0.9);
    -o-filter: grayscale(1) brightness(0.9);
    -ms-filter: grayscale(1) brightness(0.9);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    max-width: 100%;
    height: auto;
}
section.image li:hover img {
    filter: grayscale(0.1) brightness(1);
    -webkit-filter: grayscale(0.1) brightness(1);
    -moz-filter: grayscale(0.1) brightness(1);
    -o-filter: grayscale(0.1) brightness(1);
    -ms-filter: grayscale(0.1) brightness(1);
}
section.image li span.caption {
    display: none;
    position: absolute;
    text-align: center;
    padding-top: 18px;
    width: 100%;
    height: auto;
}
section.image li:hover span.caption {
    display: block;
}
section.image li span.caption.label {
    display: block;
    font-size: 23px;
    padding-top: 23px;
    font-family:'Phenotype S', times;
}
section.image li:hover span.caption.label {
    display: none;
}

【讨论】：