0
232
Viewsfilter blur is overflowing CSS
filter blur is overflowing to header and sidebar. It is looking ugly ("overflow: hidden" doesn't work)
How to I fix the overflow ?
HTML:
<div class="subscribe">
<div class="subscribe__content">
<div class="subscribe__left">
<h2>Subscribe</h2>
<input type="text" class="subscribe__field" placeholder="Name">
<input type="button" class="subscribe__btn" value="Submit">
</div>
<div class="subscribe__right">
</div>
</div>
</div>
CSS:
.subscribe{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 20px 100px;
&::before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('https://i.hurimg.com/i/hdn/75/0x0/5de62c4a0f25441e58232693.jpg') no-repeat center;
background-size: cover;
filter: blur(25px);
opacity: 0.8;
}
}
·
Juan Pablo Isaza
1 answers
Answer question0
I've restructured your styles to set background-image to the element, and use a backdrop-filter on your ::before element. That way the corners will always be sharp but the blur filter will still be applied on the background.
Also, make sure that your .subscribe__content has z-index greater than .subscribe::before.
.subscribe {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 20px 100px;
background: url('https://i.hurimg.com/i/hdn/75/0x0/5de62c4a0f25441e58232693.jpg') no-repeat center;
background-size: cover;
opacity: 0.8;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(25px);
z-index: 10;
}
&__content {
z-index: 20;
}
}
·
Juan Pablo Isaza
Report
Answer question