Issue
I'm looking to blur the overall 100% background behind a fixed modal that pops up on a button click.
I'd have thought it'd just be a blur filter, but it seems to only cover a small portion of the screen. I've tried adding 100vh height + width, and setting the position as fixed with top: 0, left: 0 but the elements aren't centering right.
To be clear - I'm wanting the background elements behind the modal to be blurred, so the section behind it but the modal in focus.
Here's the HTML (not sure much point but posting anyway):
That's all I've coded so far - want to do this before adding the rest in. Any tips would be great. Cheers!
.blog-modal-section {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
filter: blur(8px);
-webkit-filter: blur(8px);
position: fixed;
top: 0;
left: 0;
z-index: 0;
}
.blog-modal-container {
height: 40%;
width: 40%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
<section class="blog-modal-section">
<div class="blog-modal-container">
<div class="blog-modal-content">
<h2>My blogs</h2>
<ul>
<li>
<a href="#">Blog 1 - Coming Soon</a>
</li>
</ul>
</div>
</div>
</section>
Solution
The following would make a screen-filling element that also adds blur.
.bg{
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(15px);
}
Answered By - Wouter van Nifterick
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.