CODEWITHSUNDEEP
htmlcss
jz22
jz22

Reputation: 2658

Frosted glass effect on entire div doesn't work properly

I want a div to be completely covered by another layer that looks like frosted glass. The div under the frosted glass will be the background for my responsive website. It can be gradient or just a picture like in my fiddle. I managed to cover the the div with the effect. However there is still a little gap between the edges of the layers but I want the effect to cover the entire div. Thanks.

.bg {
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=);
  width: 100%;
  height: 500px;
  margin: 0;
}

.blurred-box {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: inherit;
  overflow: hidden;
}

.blurred-box:after {
  content: '';
  width: 100%;
  height: 100%;
  background: inherit;
  position: absolute;
  left: 0;
  left position right: 0;
  top: 0;
  bottom: 0;
  top position bottom: 0;
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
  filter: blur(10px);
}
<div class="bg">
  <div class="blurred-box"></div>
</div>

Upvotes: 0

Views: 185

Answers (2)

curveball
curveball

Reputation: 4505

Also you could try to scale a little the blurred image container and hide the overflow on .bg:

.bg {
    overflow: hidden;
}

.blurred-box:after {
    transform: scale(1.08, 1.08);
}

and set padding: 0; margin: 0; on body to get rid of the small offsets. Some styles are redundant. So, my attempt:

body {
   padding: 0;
   margin: 0;
}
.bg {
  position: relative;
  background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=);
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.blurred-box {
  width: 100%;
  height: 100%;
  background: inherit;
}

.blurred-box:after {
  content: '';
  width: 100%;
  height: 100%;
  background: inherit;
  position: absolute;
  top: 0;
  left: 0;
  top: 0;
  bottom: 0;
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
  filter: blur(10px);
  transform: scale(1.08, 1.08);
}
<div class="bg">
  <div class="blurred-box"></div>
</div>

Upvotes: 0

Justinas
Justinas

Reputation: 43507

One way to fix that is set :after to be bigger then container:

.bg {
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=);
  width: 100%;
  height: 500px;
  margin: 0;
}

.blurred-box {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: inherit;
  overflow: hidden;
}

.blurred-box:after {
  content: '';
  width: 120%;
  height: 120%;
  background: inherit;
  position: absolute;
  left: -10%;
  top: -10%;
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
  filter: blur(10px);
}
<div class="bg">
  <div class="blurred-box"></div>
</div>

Upvotes: 1

Related Questions