将光标放在图像上时显示的位置文本？

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