title: Adding text on top of an image carousel
body: <p>I'm looking to get different paragraphs of text to sit on top of slides in a jquery carousel I'm using. The html being used is below;</p>
  
  <pre><code>&lt;div class="slider"&gt;
      &lt;ul class="slides"&gt;
          &lt;li class="slide"&gt;
              &lt;p&gt;example text to sit on top of carousel and change when you click
              through carousel images&lt;/p&gt;
              &lt;img src="library/images/item1.jpg" class="imgdivide"&gt;
          &lt;/li&gt;
          &lt;li class="slide"&gt;
              &lt;img src="library/images/item2.jpg" class="imgdivide"&gt;
          &lt;/li&gt;
          &lt;li class="slide"&gt;
              &lt;img src="library/images/item1.jpg" class="imgdivide"&gt;
          &lt;/li&gt;
          &lt;li class="slide"&gt;
              &lt;img src="library/images/item2.jpg" class="imgdivide"&gt;
          &lt;/li&gt;   
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the styling I have at the moment;</p>
  
  <pre><code>.slider {
      position: relative; 
      width: 100%; 
      height: 50%;
      overflow: hidden;
  }
  
  .slides { 
      width: 100%; 
      height: 50%; 
      overflow: hidden;
  }
  
  .slide p { 
      width: 100%;
      display: block;
      font-family: Georgia,"Times New Roman", Times, serif;
      size:16px; 
      line-height: 20px; 
      color: #FFF;
  }
  
  .slide {
      width: 100%; 
      float: left; 
  }
  </code></pre>
  
  <p>If anyone can help out on this that would be ace!</p>