CODEWITHSUNDEEP
javascripthtmlcss
Bogaso
Bogaso

Reputation: 3318

How to bring frosty-glass effect for div over another div that contain texts

I want to have a frosty-glass effect on a div. There are few examples over internet on how to achieve this, however most of them say that, you have a background image for your body then you have a small div over it and want to have frosty-glass effect for that small div.

However my case is slightly different as I dont have any background image rather some text (or any other DOM for that matter) under a div, there is another div which covers that 1st div partially and I want to have frosty-glass effect on that 2nd div. Below is a little example

HTML

<div class = 'parent'>
  <div class = 'top'>

  </div>
  <div class = 'bottom'>
    Some div...
  </div>
 </div>

CSS

.parent {
  height: 200px;
  width: 100%;
}

.top {
  height: 80px;
  width: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0,0,0,.2);
}
.bottom {
  height: 150;
  width: 100%;
  margin-top: 10px;
}

I am looking for to have the frosty-glass effect for div with class top which is actually fixed positioned.

The Codepen example - https://codepen.io/Volabos/pen/RwWxwQd

Is there any way to have that effect using CSS?

Thanks for any pointer

Upvotes: 0

Views: 163

Answers (1)

collapsar
collapsar

Reputation: 17238

Use the css filter property, eg. filter: blur(3px);.

Find a demo based on yours here.

Upvotes: 1

Related Questions