<div class='wrapper' id='hermes'>
<div class='blurred-wrapper'>
<div class='blurred'>swift as hermes</div>
</div>
<div class='still'>swift as hermes</div>
</div>
<div class='wrapper' id='sonic'>
<div class='blurred-wrapper'>
<img class='blurred' src='http://2.bp.blogspot.com/-IixO6EttRfY/T25DaTUWJ-I/AAAAAAAAAUo/1lJ7DuKYS6k/s1600/Sonic_runsmall.png' height='100'></img>
</div>
<img class='still' src='http://2.bp.blogspot.com/-IixO6EttRfY/T25DaTUWJ-I/AAAAAAAAAUo/1lJ7DuKYS6k/s1600/Sonic_runsmall.png' height='100'></img>
</div>
<div class='wrapper' id='spacex'>
<div class='blurred-wrapper'>
<div class='blurred'>SPAAACE</div>
</div>
<div class='still'>SPAAACE</div>
</div>
.wrapper {
--blur: 5;
font-size: 5rem;
margin:1rem 0;
position:relative;
display:flex;
flex-direction:row;
justify-content:center;
border-radius:1rem;
padding:1rem 0;
}
.blurred-wrapper {
position: absolute;
filter: blur(1rem);
transform: scale(
var(--blur),
0.001
)
}
.blurred {
transform: scale(
calc( 1/var(--blur) ),
1000
)
}
#hermes{
background:lightgray;
color:#555;
}
#sonic{
background:#000;
}
#spacex{
background:hsl(250,50%,10%);
font-family:sans-serif;
color:hsl(200,100%,80%)
}
#spacex>.still{
color:white
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.