title: Adding text to a hover over image
body: <p>I am new to CSS and have been experimenting for the last few weeks. I have created a CSS hover over image for a button, but need to add text over the top of it. </p>
  
  <p>For some reason every time I try to add it, the text is placed in a div box below and doesn't get placed in the area I wish (Over the top of the Image)</p>
  
  <p>I have added my code to JSfiddle below, any help would be appreciated!</p>
  
  <p><a href="http://jsfiddle.net/leeyum8721/LGh4Z/" rel="nofollow">http://jsfiddle.net/leeyum8721/LGh4Z/</a></p>
  
  <pre><code> &lt;style&gt;
      .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;
      }
      &lt;/style&gt;
  
  &lt;div class="img3 left"&gt;
  &lt;a href="" id="StjohnsButton" class="StjohnsPageButton"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>