Help! I am stuck with the "frosted glass effect" (pure css)

HTML-CSS
1

Hi,

I am still a newbie and totally stuck with a project! I´ve been trying to reproduce the “frosted glass effect” like in this cute youtube video: https://www.youtube.com/watch?v=zoQv5kyk4jo

Problem is, I want to build it in flexbox! So far so good, but the h2 will be blurred, too. I really would like it to be clear cut, but it won´t work, whatever I try!

Any suggestions?

Here´s my HTML

<body>
    <div class="wrapper">
      <div class="banner">
        <div class="img-text">
                      <h2>Frosted Glass Effect</h2>
        </div>
      </div>
    </div>
    <div class="wrapper2">
      <div class="banner2">
        <div class="img-text">
                      <h2>Frosted Glass Effect</h2>
        </div>
      </div>
    </div>
</body>

And here´s the CSS :

/* original imigae : pexels-pixabay-355411.jpg*/

* {
    margin: 0;
    padding: 0;
}

html {
   font-size: 16px;
   height: 100vh;
}

.wrapper {
    background-image: url('winter-lake.jpg'); 
    height: 100vh; 
    background-size: cover;
    background-position: fixed;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.banner {
    width: 80vmax;
    height: 30vmax;
    border: solid 1px rgb(210, 255, 255);
    background: inherit;
    box-shadow: inset 0 0 0 500px rgb(200, 255, 255, 0.3);
    filter:blur(10px);
}

.img-text {
    font-size: 3em;   
    padding: 1em;
    color: white;
    font-variant: small-caps;
    background-color: transparent;
}

.wrapper2 {
    background-color: none; 
    height: 100vh; 
    background-size: cover;
    background-position: fixed;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner2 {
    width: 80vmax;
    height: 30vmax;
    border: solid 1px rgb(210, 255, 255);
    background: inherit;
}
2

Try z-index.

3

Ah that definitely won’t work after looking at the vid :sweat_smile:

It’s not immediately clear to me how you’d accomplish this with flexbox. Probably what I would do is copy the video code and start breaking stuff to see how everything works, then see if I can refactor it to use flexbox. They are using a lot of hacky posititioning to get this effect.

One thing that comes to mind is that applying a filter and box shadow effect to a dynamically resizing div like that would probably perform pretty poorly especially at scale.

1 Like
4

Thank you rankinaaron! It seems, z-index only works on elements, that have been positioned before. I am trying to get good at responsive design at the moment, that’s why I insist on flexbox. This little “frosted glass” project is kind of procrastination, so to say. To be honest, I really don’t understand what he is doing with all the positioning stuff! Probably I should come back to the project, when I have learned about that.

5

Can you explain what you’re trying to do here? Is it literally that you want a set of images side by side each with a caption that sits on its own frosted glass effect?

6

Oops sorry :scream: That was the old version of the project!!! It was a desperate try to make it work. I thought if I just reproduce a wrapper and a banner of the exact same size like the original ones, but without the frozen glass effect (produced by the filter: blur and box-shadow), and make them transparent and place the h2 on top of it, the h2 would be clearcut because it is on top. Obviously, it didn’t work!

7

I just want my h2 to shine through :sob: