html - 我怎样才能将图像和它的文本组合在一起，以便它们可以

Question

下面 (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>

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