title: Mouseover to get div to appear within the border of an image
body: <p>When I hover over an <code>img</code> within <code>div.hover-group</code>, the div <code>div.hover-toggle</code> becomes visible, and becomes invisible when the mouse leaves the image.
  The <code>div.hover-toggle</code> should appear within the area of the <code>img</code> it belongs to, <strong>aligned with its bottom border</strong> and each of the <code>button.btn</code>s <strong>of equal width</strong>.</p>
  
  <p>To illustrate:</p>
  
  <p>no mouseover:</p>
  
  <pre><code>|-----------|
  |           |
  |    img    |
  |           |
  |           |
  |           |
  |-----------|
  </code></pre>
  
  <p>is mouseover:</p>
  
  <pre><code>|-----------|
  |           |
  |    img    |
  |           |
  |-----------|
  | 1 | 2 | 3 |
  |-----------|
  </code></pre>
  
  <p>I have already accomplished the hover toggling using jQuery:</p>
  
  <pre><code>$(selector1).mouseover(function(){$(selector2).hide();});
  $(selector1).mouseout(function(){$(selector2).show();});
  </code></pre>
  
  <p>However, have been unable to align <code>div.hover-toggle</code> with the bottom of the image, as illustrated, it appears below the image instead.</p>
  
  <p>How can this be done?</p>
  
  <p>Thanks!</p>
  
  <hr>
  
  <p>The DOM I am manipulating above appears below. It uses twitter bootstrap.</p>
  
  <pre><code>&lt;ul class="thumbnails"&gt;
      &lt;li class="span3"&gt;
          &lt;div class="hover-group thumbnail"&gt;
              &lt;img src="http://placehold.it/260x180" alt=""&gt;
              &lt;div class="hover-toggle btn-group"&gt;
                  &lt;button class="btn"&gt;1&lt;/button&gt;
                  &lt;button class="btn"&gt;2&lt;/button&gt;
                  &lt;button class="btn"&gt;3&lt;/button&gt;
              &lt;/div&gt;
              &lt;h5&gt;Thumbnail label&lt;/h5&gt;
              &lt;p&gt;Thumbnail caption right here...&lt;/p&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  ...
  &lt;/ul&gt;
  </code></pre>