WordPress: Fade Out Excerpt Behind Read More Link

How about an awesome Fade Out effect to “Read more…” link for your post feed? Search no more! Just one CSS hack and done! Themes just neglect this “Continue reading” link and leave it as is. Stuck on the left, no margin, no effects, barely noticeable, plain boring. This easy fade-out effect

Final Result and Requisites

Requisites:

1. A Theme that supports post feeds. AMP themes usually do that, when you orient the screen horizontally
2. Don’t forget the Read More Tag after the first paragraph of ALL your posts!

The WordPress Read More Syntax

Here is the typical output syntax of a WordPress post in a multiple posts index page:

<article class="post +bunch of classes...">
  < ..content.. >
  <p> 
    <a href="#" class="more-link"> <span>(more…)</span> </a>
  </p>
</article>
..next post

As you can see, when you insert a <!--more--> separator in your post, this results in a span, within a link, within a paragraph, at the end of the post.

So the trick here is to mimic an invisible link box over the end of the text. The box will be limited in height by the appropriate property padding while the parent div has 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. The result is a giant invisible Read More button, going as high as the first padding value that you will set.

The Magic CSS Code for Fading Read More

/* parent of the read more */
:has(> a.more-link) { 
  position: relative;
  text-align: center;
  padding: 200px 0 20px 0; /* defines the gradient size */
  margin-top: -224px; /* moves the gradient up, above the tags */
  margin-bottom: -24px; /* moves the tags up,closer to the gradient */
  background: linear-gradient(to bottom, transparent, white); /* breaks if position is not relative */
}

This should work out of the box, tested with Twenty Fourteen Theme. Adjust the values mentioned depending on your theme, and the background color to match yours.

Where to Add This Code?

Add this code in the header.

• Option 1: Theme Customize > Custom CSS
• Option 2: With this plugin: Custom CSS & JS plugin