title: Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div
body: <p>I'm trying to get a nice fade-out effect at the bottom of a section of text as a 'read more' indicator.  </p>
  
  <p>I've been following a bit off <a href="http://css-tricks.com/text-fade-read-more/" rel="noreferrer">this</a> and other tutorials, and my code currently is as follows:</p>
  
  <h3>html</h3>
  
  <pre><code>&lt;section&gt;
      &lt;p&gt;malesuada fames ac turpis egestas...leo.&lt;/p&gt;                                                                  
      &lt;p&gt;malesuada fames ac turpis egestas...leo.&lt;/p&gt;
      &lt;div class="fadeout"&gt;&lt;/div&gt;
  &lt;/section&gt;
  &lt;p&gt;Stuff after&lt;/p&gt;
  </code></pre>
  
  <h3>css</h3>
  
  <pre><code>.fadeout {
      position: relative; 
      bottom: 4em;
      height: 4em;
      background: -webkit-linear-gradient(
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 1) 100%
      ); 
  } 
  </code></pre>
  
  <p><a href="http://jsfiddle.net/6k3vV/" rel="noreferrer">jsFiddle</a> </p>
  
  <p>The problem is, even when I position the transparent div over the body of text, the 4em's of space still exists between  and 'Other Stuff.'</p>
  
  <p>Any ideas?</p>