在图像上有光标时出现的位置文本

Question

我已经设法在图像上放置光标时设法显示了一个文本，但是现在我想将其定位，以便它出现在图像上，最好在其中心。而且我也想更改其字体尺寸。由于我是Web开发的新手，我不确定如何安排。

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用于水平居中。

更新示例此处

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