Question

我设法得到一个文本显示将光标放在图像上，但现在我想将它放置在图像上，最好是在图像的中心。而且我还想改变它的字体大小。由于我是网络开发的新手，我不知道如何安排。

JSFiddle提供必要的信息：http://jsfiddle.net/gGvb2/

HTML：

<article class="art-1">  <img src="nutrition.jpg">
<span>Nutrition</span></article>

CSS：

span {
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in-out;
}
img {
    width: 462px;
}
img:hover ~ span {
    opacity: 1;
}

非常感谢任何帮助！

Answer 1

我建议相对定位父article元素，然后绝对定位相对于它的span元素。我不确定您希望span出现在哪里，但在此示例中，它的宽度为100%，并且text-align:center用于水平居中。

UPDATED EXAMPLE HERE

span {
    opacity: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
}
img:hover ~ span, span:hover {
    opacity: 1;
    font-size:20px;
    font-weight:bold;
}
article {
    position:relative;
    display:inline-block;
}
article span {
    position:absolute;
    top:10px; left:0;
    width:100%;
    text-align:center;
    background:white;
}

将光标放在图像上时出现的位置文本？

1 个答案: