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

如何将图像及其文本组合在一起以便它们可以组合

1 个答案: