title: CSS: Expand div upwards when height is changed?
body: <p>This is what my code looks like:</p>
  
  <pre><code>&lt;div class="progress"&gt;
      &lt;div class="total"&gt;
          &lt;span class="current"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css of the above 4 tags:</p>
  
  <pre><code>.progress
  {
      margin-top: -5px;
      vertical-align: bottom;
      border-bottom: 1px solid #090605;
  }
  
  .total
  {
      background-color: #221F1E;
      border-top: 1px solid #2F2F2F;
      height: 2px;
  }
      .hover
      {
          margin-top: -8px;
          height: 5px;
      }
  
  .current
  {
      float: left;
      position: relative;
      top: -1px;
      height: 100%;
      color: blue;
  }
  </code></pre>
  
  <p><strong>I manipulate the height of <code>.total</code> in a hover event.</strong></p>
  
  <p>I can't find a way to make <code>.total</code> to expand up when I change the height from <code>2px</code> to <code>5px</code> on hover. When I change the height now, it works, it expands down by <code>3px</code> and shrinks by <code>3px</code> when the mouse leaves.</p>
  
  <p>I want it to expand <strong>up</strong> instead of down.</p>
  
  <p>Any ideas?</p>