title: CSS Help - div over image
body: <p>I'm making a small site for my college project, most of it is complete but I'm stuck on how I should go about adding a feature.</p>
  
  <p>If you go onto a site like <a href="http://wallbase.cc/toplist" rel="nofollow">http://wallbase.cc/toplist</a> and rollover an image you'll see a little black bar will appear on the bottom of the image showing the dimensions. I want to add this to my website but I don't know what CSS rules to use in order to get the black bar to show ontop of the image, everything else I've tried either goes to the side of the image or floats on the page.</p>
  
  <p>The page will be generated with jQuery + DOM but the end result will look a bit like:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div class="error" id="pretext"&gt;Showing x results&lt;/div&gt;
      &lt;div class="image"&gt;&lt;img src="imagelink" height="200" width="200" alt="thumb"&gt;&lt;/img&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my relevant CSS rules:</p>
  
  <pre><code>#content {
      background: #FBFBFB;
      border: solid 1px #CCC;
      border-top: none;
      border-bottom: none;
      padding: 15px;
  }
  
  .image {
      width: 200px;
      height: 200px;
      border: 1px solid #CCC;
      display: inline-block;
      margin: 5px;
  }
  </code></pre>