当光标移到图像上时，我设法显示了一个文本，但是现在我想将其放置在图像上，最好在图像的中央。而且我还想更改它的字体大小。由于我是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;
}
任何帮助是极大的赞赏！
我建议相对定位父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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句