0

我有一个内联图像，我想为其添加标题。我希望此标题具有轻微的叠加颜色，并填充图像宽度/高度的 100%。

因为我的图像显示在响应式网格中，所以图像的大小是流动的。因此，我不能应用像“height: 261px; line-height:261px”这样的简单 CSS。

我无法让这种悬停填充 100% 的图像高度，而且我也无法将图像垂直居中，因为图像大小是流动的。

到目前为止，这是我的 CSS：

.ctp-hover img{
    width:100%;
    height:auto;
}

a.ctp-hover {
    display: inline-block;
    position: relative;
}

.hover-caption {
    text-align:center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: red;
    background:rgba(199,74,78,0.75);
    color: white;
    display: none;

}

我在这里附上了一个 JSFiddle 示例：http: //jsfiddle.net/5X7ub/16/

4

2 回答 2

1

我选择了纯 css 解决方案，不需要 js。我使用的 css 过渡不是完全跨浏览器，但它们应该会优雅地降级，嘿，如果你想使用劣质的浏览器（阅读 IE），你应该期待劣质的浏览体验。

我的代码如下所示（我稍微简化了 HTML 以使内容更具可读性）：

<a class="hover-me">
    <span class="caption">VIEW</span>
    <img src="http://lorempixel.com/261/261/"/>
</a>

.hover-me {
    position: relative;
    width: 250px;
    display: inline-block;
}

.hover-me img{
    width:100%;
    height:auto;
    display: block;
}

.hover-me:after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    background: rgba(255,0,0,.5);
    transition: all .5s ease;
    opacity: 0;
}
.hover-me .caption {
    display: block;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    margin-top: -10px;
    text-align: center;
    transition: all .5s ease;
    opacity: 0;
    z-index: 2;
    color: #fff;
    line-height: 20px;    
}
.hover-me:hover:after , .hover-me:hover .caption {
    opacity: 1;
}

您可能会注意到：
- 在不透明度的帮助下隐藏了标题和叠加层，以使其可以使用 css 进行转换。
- 拉伸是通过添加 abottom: 0;或height: 100%;
- 通过将 top 设置为 50% 并将 margin-top 设置为文本高度的一半来垂直居中的
- 覆盖是通过:after链接上的 a 实现的，因为标题有现在还没有全高。这也是 z-index 存在的原因，否则叠加层会出现在标题的顶部。

不要忘记通过诸如 prefixr 之类的东西运行你的代码（或者使用一些 less/sass mixins，如果你有它们）以获得最大的跨浏览器支持（主要是为了不透明度和过渡）

我希望代码清晰。如果没有，请随时询问。我还更新了你的小提琴来演示：http: //jsfiddle.net/5X7ub/25/

于 2013-11-06T21:17:23.670 回答
0

我已经更新了你的小提琴来解决你的问题。你只需要添加

bottom: 0
padding-top: 48%

标题覆盖整个高度，文本大致在中心对齐。恐怕在不支持 CSS3 的 calc() 的情况下，您只能将文本放置在如此靠近中间的位置。

另见：

于 2013-11-06T20:36:24.247 回答