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.

Banner graphic for custom CSS tooltip to blur and fade excerpt on premium content preview

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

Screenshot of default premium content without a blur and fade effect.
Screenshot of default premium content without a blur and fade effect.

Screenshot of premium content with the blur and fade effect.
Screenshot of premium content with the blur and fade effect.