iCloud Blur Fiddle SO

HTML

<div class="login">
    
</div>
<div class="nonBlur">
    <img src="https://wallpaper-house.com/data/out/8/wallpaper2you_232686.jpg" alt="banner" style="width: 100%; position: absolute; top: 10%; left: 0;" />
</div>
<span class="homeBtn">Click to log in</span>

CSS

body {
    background: #b33c3c;
}

.homeBtn {
    padding: 1em;
    background: rgba(255, 255, 255, 1);
    min-width: 1em;
    display: block;
    position: absolute;
    bottom: 1em;
    left: 40%;
    border-radius: 5px;
    font-family: 'century gothic';
    font-size: 1.2em;
    font-weight: bold;
    color: #b33c3c;
    cursor: pointer;
}

.login {
    width: 20em;
    height: 20em;
    background: #c1c1c1;
    position: relative;
    display: none;
    top: 2em;
    margin: 0 auto;
    z-index: 1000;
    border-radius: 5px 5px 0 0;
}

.blur {
  filter: blur(20px);
}

JavaScript

$('.homeBtn').on('click', function() {
    $('.nonBlur').toggleClass('blur');
    $('.login').slideToggle(500);
});