Text Fade Out / Read More Link for WordPress

Spread the love
(Last Updated On: February 26, 2022)

 

wp 4.9.1 tested

The default “read more…” link in WordPress is quite boring… and often, so-called theme developers just neglect it and leave it as is. Stuck on the left, no margin, no effects, barely noticeable, plain boring.

What about an awesome Fade Out effect instead? You can always find codepens and jsfiddles here and there but they have to be adapted for WordPress and you don’t have time to spend on this task. Search no more!

The WordPress Read More Syntax

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

<div lass="post +bunch of classes...">
  < ..content.. >
  <p> 
    <a href="#" class="more-link"> <span>(more…)</span> </a>
  </p>
<div>
..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

.post {
 position: relative;
}
p .more-link { 
 position: absolute; 
 bottom: 90px;               /* ajust this */
 width: 100%; 
 text-align: center; 
 margin-bottom: 20px;        /* ajust this */ 
 padding: 200px 0 20px 0;    /* ajust this */ 
 background-color: transparent; /* fallback/image non-cover color */
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#FFFFFF)); /* Safari 4+, Chrome 1-9 */
 background-image: -webkit-linear-gradient(top, transparent, #FFFFFF); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
 background-image: -moz-linear-gradient(top, transparent, #FFFFFF); /* Firefox 3.6+ */
 background-image: -ms-linear-gradient(top, transparent, #FFFFFF); /* IE 10+ */
 background-image: -o-linear-gradient(top, transparent, #FFFFFF); /* Opera 11.10+ */
 background-image: linear-gradient(to bottom, transparent, white);
}

This should work out of the box for your blog. Adjust the values mentioned depending on your configuration, and the background color to match yours. The margin-bottom greatly depends on what you have after your posts: sharing buttons, post date, comment link etc

You can try this Pen to test your configuration:

 

Where to Add This Code?

Well you need this plugin: Custom CSS & JS plugin

Or just edit your Theme or Child Theme. I can also give you a quote!

Team Cook

Self-taught IT guy, and Communist slayer for the past 40 years. Who controls the information, controls the future.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x