Hi guys / gals,
X-theme version: Latest as of 04-04-2019
Wordpress Version: Latest as of 04-04-2019
I am looking to impliment a frosted glass effect on my x-theme site.
Created a new blank page
I have followed various guides and no matter what I try it doesn’t quite work.
I have searched through the forums and the knowledge base, it seems as no one has tried the frosted glass effect before or my search terms are wrong.
The thing I’ve discovered in my CSS is that my pseudo-element won’t inherit my background!
Here is the CSS code:
I set up a container using cornerstone and set the class to "container"
CSS code I’m using in the custom CSS section for the page.
body {
background: url(“https://www.trudicanavan.com/wp-content/uploads/photo-back-blue.jpg”) no-repeat;
background-size: cover;
background-attachment: fixed;
display: grid;
justify-content: center;
}
.container {
width:30rem;
height:20rem;
box-shadow: 0 0 1rem 0 rgba(0,0,0,0.5);
position:relative;
background: inherit;
overflow: hidden;
}
/* This is my pseudo-element /
.container::before {
content: ‘’;
position: absolute;
background:inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px); / this is where I blur my background but it doesn’t work */
margin: -20px;
}
When I try this outside of the X-theme framework it works well.
Can annyone help me with this frosted glass effect within X?
Kind Regards
Chris Gomersall
zpegleg2003@gmail.com