Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save kimcoleman/299bb458310e00d7282c090110c6b4f0 to your computer and use it in GitHub Desktop.
Save kimcoleman/299bb458310e00d7282c090110c6b4f0 to your computer and use it in GitHub Desktop.
CSS to accompany the recipe on filtering the featured image and include an overlay if the post is protected.
/* Use this with the recipe here: https://gist.github.com/kimcoleman/faf2cd0a83f3ca7a5c6c368e371ad1f3 */
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment