title: Aligning text within a 'hover over' jquery
body: <p>I am designing a site that has images that when hovered over fade a text appears.</p>
  
  <p>I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.</p>
  
  <p><a href="https://stackoverflow.com/questions/2986791/div-with-text-over-an-image-on-hover">DIV with text over an image on hover</a></p>
  
  <p>Here is my amended code, amended</p>
  
  <p>CSS</p>
  
  <pre><code>    p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
  
  
     div.containerdiv{position:relative}
  
  div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
  
  div.texts:hover{display:block}
  </code></pre>
  
  <p>html</p>
  
  <pre><code>    &lt;div class="grid_8"&gt;
  &lt;a href="cncpt.html"&gt;
  &lt;div class="containerdiv"&gt;
      &lt;img src="images/cncpt.jpg" alt="background"&gt;
      &lt;div class="texts"&gt;
  &lt;p1&gt;LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.&lt;/p1&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  &lt;/div&gt;
    &lt;!-- end .grid_8 --&gt;
  </code></pre>
  
  <p>Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!</p>
  
  <p>Any ideas on how to solve this would be greatly appreciated.</p>
  
  <p>Thanks,
  John</p>