<svg style="display: none;">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
<feColorMatrix values="0.7 0 0 0 0
0 0.7 0 0 0
0 0 0.7 0 0
0 0 0 1 0" />
</filter>
</defs>
</svg>
<input type="checkbox" id="overlay-trigger" />
<main>
<div class="text-overlay">
<h1>Overlay with background blur</h1>
<p>Adding an additional blur to the background content when opening an overlay.</p>
<p>The blur is not animated, which doesn't seem necessary when the additional overlay and modal are.</p>
<p>The blur is achieved with an <abbr title="Scalable Vector Graphics">SVG</abbr> filter, rather than a <abbr title="Cascading Style Sheets">CSS</abbr> filter, for better support across browsers.</p>
<label for="overlay-trigger" class="button">Launch overlay</label>
</div>
</main>
<div id="overlay">
<div class="modal" role="dialog" aria-describedby="dialog-content">
<label for="overlay-trigger" class="modal--close" role="button" aria-label="Close modal">✕</label>
<p id="dialog-content">Modal lorem ipsum dolor sit amet consectetur adispiscing elit!</p>
</div>
</div>
$bg-color: white;
$bg-color-inverse: black;
$link-color: teal;
$text-color: black;
$text-color-inverse: white;
$border-radius: 0.25rem;
$box-shadow: 0 0.5rem 0.5rem -0.25rem rgba(black, 0.3), 0 0.5rem 2rem -0.5rem rgba(black, 0.3);
$timing: 350ms;
@mixin center-content {
display: flex;
align-items: center;
justify-content: center;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font: {
family: Kanit, sans-serif;
size: 1.3rem;
weight: 300;
}
line-height: 1.25;
}
h1 {
font: {
size: 2.6rem;
weight: 100;
}
line-height: 1;
}
main {
@include center-content;
width: 100vw;
height: 100vh;
background: {
image: url(https://farm6.staticflickr.com/5604/15389508190_31b51e819b_k.jpg);
size: cover;
}
}
.text-overlay {
max-width: 42rem;
padding: 4rem;
background-color: rgba($bg-color-inverse, 0.8);
border-radius: $border-radius;
color: $text-color-inverse;
p { color: rgba($text-color-inverse, 0.7); }
& > * + * { margin-top: 1rem; }
}
.button {
display: block;
max-width: fit-content;
padding: 0 1.5em;
border-radius: 1.5em;
background-color: $bg-color;
color: $link-color;
font-weight: 300;
line-height: 3em;
box-shadow: $box-shadow;
&:hover {
box-shadow: 0 0 0 0.5rem rgba($link-color, 0.2) inset;
}
}
#overlay {
@include center-content;
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba($bg-color, 0.6);
transition: opacity $timing ease-out;
}
.modal {
max-width: 30rem;
padding: 3.5rem 3rem 3rem;
position: relative;
border-radius: $border-radius;
background-color: $bg-color;
line-height: 1.4;
box-shadow: $box-shadow;
transform: translate3d(0, -3rem, 0);
transition: transform #{$timing * 0.6666} ease-out;
.modal--close {
width: 2rem;
height: 2rem;
position: absolute;
top: 0.5rem;
right: 0.5rem;
color: rgba($text-color, 0.5);
font-size: rem;
line-height: 2rem;
text-align: center;
border-radius: 50%;
&:hover {
color: $link-color;
background-color: rgba($link-color, 0.2);
}
}
}
#overlay-trigger {
position: fixed;
top: -5rem;
left: -5rem;
}
#overlay-trigger:checked {
~ main {
filter: url(#blur); }
~ #overlay {
opacity: 1;
pointer-events: auto;
.modal {
transform: translate3d(0, 0, 0);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.