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 Code Recipe


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.