Question

晚上好，我正在尝试使用文本进行图像悬停覆盖，但显示的文本始终位于图像的顶部。我想在它的中间显示它。我尝试了填充等，但它也移动了叠加层，它也覆盖了图像下方的自由空间。你可以帮助我，如何从顶部仅保留文本？谢谢！

编辑：或者最好的解决方案是，如果我可以包含另一个仅包含文本的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

如果您的叠加文字将是一个衬垫，那么您可以使用line-height 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一样，或者您也可以使用<p>代码而不是:before代码检查此fiddle。< / p>

.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

即可

＆＃13;

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

＆＃13;

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

＆＃13;

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>

图像悬停覆盖文本 - 文本位置

3 个答案: