Frosted Glass effect in X-theme

[peglegsqueeks]

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

[jade]

Hey Chris,

Is the site in question https://www.trudicanavan.com? I have tried to check it but it is in under construction mode which stopped me from accessing it. As this is a custom CSS code, kindly provide us with the admin access to the site so that we can check it.

Thank you.

[peglegsqueeks]

Hi Jade,

I have sent the Admin logon for the site https://www.trudicanavan.com in a secure note.

Thanks for looking at this.

Kind Regards
Chris Gomersall

[ruenel]

Hello Chris,

Thanks for providing the information. I have logged in and checked your site.

I am not sure what is the resulting effect would look like. I have applied your code somewhere else and this is only what I got.

I am seeing the background image and then the container element have a border and a box shadow. Could you please provide us a screenshot of what would be the resulting outcome we should expect?

Thank you in advance.

[peglegsqueeks]

Hi there,

sure this is result im looking for
https://webdesign.tutsplus.com/tutorials/how-to-create-a-frosted-glass-effect-in-css–cms-32535

The frosted blurred effect you can see in the video is what i’m looking for.

Kind regards
Chris G

[ruenel]

Hello Chris,

Please have your code updated and use this:

body {
     background: url("http://thrusttrust.com/manage/wp-content/uploads/2019/04/services.jpg") no-repeat;
     background-size: cover;
     background-attachment: fixed;
     display: grid;
     justify-content: center;
}
 .container {
     width:30rem;
     height:20rem;
     box-shadow: 0 0 1rem 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, .95);
    filter: blur(10px);
    /* this is where I blur my background but it doesn't work */
    margin: -20px;
    display: block;
}

Hope this helps. Kindly let us know.