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

Question

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

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

我已将我的代码添加到下面的 JSfiddle，任何帮助将不胜感激！

http://jsfiddle.net/leeyum8721/LGh4Z/

 <style>
    .img3 {
        width: 313px;
        height: 177px;
    }
    .StjohnsPageButton {
        width:313px;
        height:177px;
        display:block;
    }
    #StjohnsButton {
        background-image:url('http://www.ovoma.com/wp-content/uploads/2013/08/Venues-Page_03-2.jpg');
    }
    .StjohnsPageButton:hover {
        background-position:left 177px;
    }
    </style>

<div class="img3 left">
<a href="" id="StjohnsButton" class="StjohnsPageButton"></a>
</div>

Answer 1

Working DEMO

您需要的只是 z-index

编辑 1： UPDATED FIDDLE.

编辑 2：这是为了更进一步，使图像具有响应性

FIDDLE1
FIDDLE2

第一个小提琴使整个图像可点击。第二个仅使单词“St John's Hotel”可点击

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

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