带有文本的图像悬停叠加 - 文本位置

Question

晚上好，我正在尝试使图像悬停与文本重叠，但显示的文本始终位于图像的顶部。我想在它的中间显示它。我试过填充等，但它也移动了叠加层，它还覆盖了图像下方的免费 space。你能帮我吗，如何从顶部只留出文本？谢谢！

编辑：或者最好的解决方案是，如果我可以包含另一个 div 仅包含文本。因为我需要包含带有 html 标签的文本，而且这种方式是不可能的，通过 "content:"

这是CSS代码：

.image {
    position:relative;
    margin: 0 auto;

}
.image img {
    width:100%;
    vertical-align:;
}
.image:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;

    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:1;
}

Answer 1

如果您的叠加文本将是单行，那么您可以使用行高 css 属性使其垂直居中对齐

.image:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    line-height:300px;
}

如果不行，那我建议用另一种方式显示内容。

比如:before就这样fiddle, Or you can use a <p> tag as well instead of the :before tag check this fiddle.

.image:after {
    content:'';
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    z-index:1
}
.image:before {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height: 20px;
    top:0; left:0; right:0;
    bottom:0;
    opacity:0;
    margin:auto;
    z-index:2
}
.image:hover:after {
    opacity:1;
}
.image:hover:before {
    opacity:1;
}

Answer 2

您只需添加 line-height

.image {
    position:relative;
    margin: 0 auto;

}
.image img {
    width:100%;
    vertical-align:;
}
.image:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;
    line-height:317px;

    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:1;
}

<div class="image" style="width: 317px; height: 317px; text-align: center;">
    <img src="http://media.tumblr.com/tumblr_m6v66lJ5K61r0taux.jpg"> 
</div>

Answer 3

这是另一个 div 之类的解决方案，可以在其中插入带有 HTML 标签的文本：

.image {
    position:relative;
    margin: 0 auto;
    width: 317px;
    height: 317px;
    text-align: center;

}
.image img {
    width:100%;
    vertical-align:;
}
.image .overlayText {
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;
    line-height:317px;

    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
  margin:0;
}
.image:hover > .overlayText {
    opacity:1;
}

 <div class="image">
   <img src="http://media.tumblr.com/tumblr_m6v66lJ5K61r0taux.jpg">
   <p class="overlayText"><b>Here</b> is some text</p>
</div>

带有文本的图像悬停叠加 - 文本位置

Image hover overlay with text - text position

css

overlay