Question

我有一个内联图片，我想应用标题。我希望这个标题有一个轻微的叠加颜色，并填满图像宽度/高度的100％。

由于我的图像是在响应式网格中显示的，因此图像的大小是流动的。因此，我不能应用简单的CSS，如“height：261px; line-height：261px”。

我无法将此悬停填满图像高度的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/

Answer 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进行转换 - 通过添加bottom: 0;或height: 100%;来完成拉伸 - 通过将顶部设置为50％并将margin-top设置为文本高度的一半，文本垂直居中 - 覆盖是通过链接上的:after实现的，因为标题现在还没有达到全高。这也是z索引存在的原因，否则叠加层将显示在标题的顶部。

不要忘记通过诸如前缀之类的东西来运行你的代码（或者如果你有的话，使用一些较少的/ sass mixins）来获得最大的跨浏览器支持（主要是为了不透明度的转换）

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

Answer 2

我已更新您的fiddle以解决您的问题。你只需要添加

bottom: 0
padding-top: 48%

用于覆盖整个高度的标题和大致在中心对齐的文本。我担心你只能在不支持CSS3的calc（）的情况下将文本置于如此接近中间位置。

另见：

How to vertically align text in a div

使用jQuery / CSS将鼠标悬停在内联图像上

2 个答案: