将文字添加到悬停在图片上方

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

第一个小提琴使整个图像可以点击。第二个只使用 “圣约翰酒店” 一词

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

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

Answer 2

我已经更新了新的jsfiddle检查出来.. jsfiddle.net/LGh4Z/9 /