title: Overlap element on hover
body: <p>I want a bootstrap panels header to expand on hover, but it must not push down the next panel as shown in this Fiddle: <a href="http://jsfiddle.net/2jwg0a35/2/" rel="nofollow">http://jsfiddle.net/2jwg0a35/2/</a>.</p>
  
  <p>What I want is that when you hover over the panel heading, it'll overlap the panel-body instead of pushing down the next.</p>
  
  <p>My HTML is just twitter bootstrap stuff and looks like this:</p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;img src="profile-pic.jpg" alt="Profile pic" /&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt; &lt;b&gt;John Do&lt;/b&gt;
  
          &lt;br/&gt;J.do@example.com
          &lt;br/&gt;Somestreet
          &lt;br/&gt; &lt;b&gt;City&lt;/b&gt;
  
          &lt;br/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS looks like:</p>
  
  <pre><code>.panel-heading {
      height:100px;
  }
  .panel-heading:hover {
      height:150px; /*This actually must be 100% as there will be an image in it.*/
      position:relative;
  }
  </code></pre>
  
  <p>Anybody knows what I can do to achieve this?</p>
  
  <p>Many thanks!</p>