css - Adding text to a hover over image -

i new css , have been experimenting last few weeks. have created css hover on image button, need add text on top of it.

for reason every time try add it, text placed in div box below , doesn't placed in area wish (over top of image)

i have added code jsfiddle below, appreciated!

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> 

working demo

all needed z-index

edit 1: updated fiddle.

edit 2: go further , make image responsive

fiddle1
fiddle2

the first fiddle make whole image clickable. second 1 makes words "st john's hotel" clickable

notice have added css second fiddle text remains white in color , not have underline beacuse link

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