<div class="post-494 post type-post status-publish format-standard has-post-thumbnail hentry category-wordpress tag-wordpress tag-cdn">

 <h2 class="page-header" id="wp-cdnjs-reborn-–-speed-up-your-wordpress-site-with-cdn"><a class="anchorjs-link " href="#" aria-label="Anchor" data-anchorjs-icon="" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 1em; line-height: inherit; font-family: anchorjs-icons; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                                <a href="#" title="Permalink to WP CDNjs Reborn – Speed Up your WordPress site with CDN" rel="bookmark">Read More... with fading effect for WordPress</a>
                            </h2>
<p>The text fades out at the bottom and has a "More..." link. Text fade out is nothing new around here. But since this is a slightly different idea and the times-are-a-changin' and we can get a bit more progressive with this idea.
</p><p>
The box will be limited in height by the appropriate property max-height with it's overflow set to hidden. We'll also use relative positioning as we will need that to use absolute positioning on the read-more paragraph, which is locked to the bottom of the box and uses CSS3 gradients to achieve the text fade out.
</p>
<p> 
  <a href="#" class="more-link">
  <span>(more…)</span>
  </a>
</p>
<div>
      <span class="glyphicon glyphicon-circle-arrow-right"></span> Posted In: <a href="#" rel="category tag">Wordpress</a>            <span class="glyphicon glyphicon-tags"></span>
        Tags: <a href="#" rel="tag">WordPress</a>, <a href="#" rel="tag">CDN</a>                            <p><a class="btn btn-primary" href="#">One Comment <span class="glyphicon glyphicon-comment"></span></a></p>
</div>
</div>
body{width:370px}

.post {
  position: relative;
  overflow: hidden;
}
p .more-link { 
  font-weight: bold;
  position: absolute; 
  bottom: 90px;
  width: 100%; 
  text-align: center; 
  margin-bottom: -10px; /* ajust this */
  padding: 90px 0 20px 0; 
	background-image: linear-gradient(to bottom, transparent, white);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.