Css 将文本添加到悬停在图像上

我是CSS新手，过去几周一直在尝试。我已经为一个按钮创建了一个CSS悬停在图像上，但需要在其顶部添加文本

由于某些原因，每次我尝试添加它时，文本都会放在下面的div框中，而不会放在我希望的区域（在图像顶部）

我已经在下面的JSFIDLE中添加了我的代码，如有任何帮助，将不胜感激

.img3{
宽度：313px；
高度：177px；
}
.stjohnpage按钮{
宽度：313px；
高度：177px；
显示：块；
}
#StjohnsButton{
背景图像：url（'http://www.ovoma.com/wp-content/uploads/2013/08/Venues-Page_03-2.jpg');
}
.stjohnpage按钮：悬停{
背景位置：左177px；
}

你所需要的只是z-index

编辑1:

编辑2:这是为了进一步提高图像的响应性

第一把小提琴使整个图像可点击。第二个选项只允许单击单词“圣约翰酒店”

请注意，我已经为第二个提琴添加了一些CSS，因此文本保持白色，并且没有下划线，因为它是一个链接

.textoverimage a {
    color: #FFFFFF;
    text-decoration: none;
}

---

我已经更新了新的JSFIDLE，请查看。。jsfiddle.net/LGh4Z/9/

嗨，我不明白你到底想要什么。你能把你的文本放在小提琴上吗？当用户每次悬停在图像上时，你想在图像后添加一些文本吗？嗨，不，文本必须一直放在那里。我在下面的imgur链接中添加了一张我希望它看起来如何的图片。每次我尝试使用css标记时，它都会出现在我的图像下方，而我希望它出现在图像上方。@LiamPerry。检查我的解决方案你的悬停效果在做什么？最初，背景图像没有移动，但你现在修复了它，所以你很好。@AnaMaria太完美了，非常感谢。不过，我仍然在摆弄代码，因为我需要图像链接到另一个页面，我不太确定要把它放在哪里。我一直在把文字变成链接，而不是实际的图片。如果你想让整个图片都可以点击，就把它放在主图片的外面。。如果只想单击图像中的文本，请将其置于标记之外，立即检查第二次编辑

.textoverimage a {
    color: #FFFFFF;
    text-decoration: none;
}