diff --git a/restricting-content/style-locked-message-overlay-on-protected-content.css b/restricting-content/style-locked-message-overlay-on-protected-content.css new file mode 100644 index 0000000..22d4969 --- /dev/null +++ b/restricting-content/style-locked-message-overlay-on-protected-content.css @@ -0,0 +1,58 @@ +/** + * Add a Locked Post Message Image Overlay on Protected Content + * + * title: Add Locked Post Message Image Overlay on Protected Content + * layout: snippet + * collection: restricting-content + * category: css, content, restriction, non-member + * link: https://www.paidmembershipspro.com/locked-post-message-image-overlay/ + * + * 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. + */ +.pmpro_protected_post_featured_image { + position: relative; + overflow: hidden; +} +.pmpro_protected_post_featured_image img { + filter: grayscale(1) blur(5px); +} +.pmpro_protected_post_blur_mask { + -webkit-box-align: center; + align-items: center; + align-content: flex-start; + background: rgba( 0, 0, 0, 0.6 ); + box-sizing: border-box; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + height: 100%; + justify-content: center; + padding: 10px; + position: absolute; + text-align: center; + top: 0; + width: 100%; +} +.pmpro_protected_post_blur_mask p { + color: #FFF; + line-height: initial; + margin: 5px 0; +} +.single .pmpro_protected_post_blur_mask p { + margin: 15px 0; +} +.pmpro_protected_post_blur_mask a { + color: #FFF; + text-decoration: none; +} +.pmpro_protected_post_blur_mask a.pmpro_protected_post_button { + background-color: #FFF; + border-radius: 25px; + color: #000; + padding: 5px 30px; +}