Have you seen those flashy premium content sites where the preview content is blurred and fades out? This is a great visual cue to show readers there is MORE to read—after they subscribe.
This tooltip shows you a bit of CSS that will blur and fade the excerpt of members-only content. Visitors and users without access will see a portion of the introductory text, then are prompted to sign up with the appropriate non-member message.
Table of contents
The Custom CSS
.pmpro-no-access p {
-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
}
Adding the Custom CSS to Your Website
This custom CSS can be placed in a stylesheet for PMPro Customizations or pasted directly into the Appearance > Customize > Additional CSS field. You can also include this CSS in your child theme’s style.css file. Do not place custom CSS in any file in a theme that gets regularly updated or you will lose your code.
The targeted CSS selector in this recipe .pmpro-no-access is added to all protected posts. Your theme must be using the WordPress post_class() filter in order for this selector to be used. If this recipe doesn’t work as-is for your site, please open a ticket in our support area. We can take a look at your live site and find the right class to target with this code recipe for your theme.
Screenshots: Before and After
