Nothing is beyond you.

index.html

<div id="blur"></div>
<div class="bubbleLarge"></div>
<div class="bubbleLarge"></div>
<div class="bubbleLarge"></div>
<div class="bubbleLarge"></div>
<div class="bubbleLarge"></div>
<div class="bubbleMedium"></div>
<div class="bubbleMedium"></div>
<div class="bubbleMedium"></div>
<div class="bubbleMedium"></div>
<div class="bubbleMedium"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div id="hide" onclick="document.getElementById('blur').style.display = 'none';"></div>
<div id="show" onclick="document.getElementById('blur').style.display = 'inline';"></div>

Nothing is beyond you..markdown

Nothing is beyond you.

Another experiment with CSS animations. This time incorporating background-size. Click the buttons in the upper left to toggle blur layer visibility on/off.

Full version here: http://ericanton.net/nothing

A Pen by ericanton on CodePen.

License.

style.css

html { 
  background: url(http://ericanton.net/nothing/nothing_codepen.png) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	margin: 0px;
	padding: 0px;
}

body{
	margin: 0px;
	padding: 0px;
	text-align: center;
}

#blur {
	background: url(http://ericanton.net/nothing/nothing_blur_codepen.png) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: fixed;
	top:0px;
	left:0px;
	height: 100%;
	width: 100%;
	z-index: -1;
}

#show {
	z-index: 999;
	background-color: #FFFFFF;
	opacity: 0.2;
	height: 50px;
	width: 50px;
	-webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    cursor: help;
	
}

#hide {
	z-index: 999;
	background-color: #FFFFFF;
	opacity: 0.1;
	height: 50px;
	width: 50px;
	-webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    cursor: help;
	
}

.bubbleSmall {
	background: url(http://ericanton.net/nothing/nothing_codepen.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: fixed;
	cursor: help;
    height: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    animation-name: bubbleSmall;
    animation-duration: 1.25s;
    animation-direction: linear;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-name: bubbleSmall;
    -webkit-animation-duration: 1.25s;
    -webkit-animation-direction: linear;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: bubbleSmall;
    -moz-animation-duration: 1.25s;
    -moz-animation-direction: linear;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -o-animation-name: bubbleSmall;
    -o-animation-duration: 1.25s;
    -o-animation-direction: linear;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    
}

@keyframes bubbleSmall {
    0% {opacity: 0.5; top:100%; width:25px;}
    100% {opacity: 0.2; top:0%; width:50px;}
}

@-moz-keyframes bubbleSmall {
    0% {opacity: 0.5; top:100%; width:25px;}
    100% {opacity: 0.2; top:0%; width:50px;}
}

@-webkit-keyframes bubbleSmall {
    0% {opacity: 0.5; top:100%; width:25px;}
    100% {opacity: 0.2; top:0%; width:50px;}
}

@-o-keyframes bubbleSmall {
    0% {opacity: 0.5; top:100%; width:25px;}
    100% {opacity: 0.2; top:0%; width:50px;}
}

.bubbleMedium {
	background: url(http://ericanton.net/nothing/nothing_codepen.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: fixed;
	cursor: help;
    height: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    animation-name: bubbleMedium;
    animation-duration: 1.75s;
    animation-direction: linear;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-name: bubbleMedium;
    -webkit-animation-duration: 1.75s;
    -webkit-animation-direction: linear;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: bubbleMedium;
    -moz-animation-duration: 1.75s;
    -moz-animation-direction: linear;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -o-animation-name: bubbleMedium;
    -o-animation-duration: 1.75s;
    -o-animation-direction: linear;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    
}

@keyframes bubbleMedium {
    0% {opacity: 0.5; top:100%; width:50px;}
    100% {opacity: 0.2; top:0%; width:100px;}
}

@-moz-keyframes bubbleMedium {
    0% {opacity: 0.5; top:100%; width:50px;}
    100% {opacity: 0.2; top:0%; width:100px;}
}

@-webkit-keyframes bubbleMedium {
    0% {opacity: 0.5; top:100%; width:50px;}
    100% {opacity: 0.2; top:0%; width:100px;}
}

@-o-keyframes bubbleMedium {
    0% {opacity: 0.5; top:100%; width:50px;}
    100% {opacity: 0.2; top:0%; width:100px;}
}

.bubbleLarge {
	background: url(http://ericanton.net/nothing/nothing_codepen.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: fixed;
    height: 200px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
    animation-name: bubbleLarge;
    animation-duration: 2s;
    animation-direction: linear;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-name: bubbleLarge;
    -webkit-animation-duration: 2s;
    -webkit-animation-direction: linear;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: bubbleLarge;
    -moz-animation-duration: 2s;
    -moz-animation-direction: linear;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -o-animation-name: bubbleLarge;
    -o-animation-duration: 2s;
    -o-animation-direction: linear;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    
}

@keyframes bubbleLarge {
    0% {opacity: 1.0; top:100%; width:100px;}
    100% {opacity: 0.2; top:0%; width:200px;}
}

@-moz-keyframes bubbleLarge {
    0% {opacity: 1.0; top:100%; width:100px;}
    100% {opacity: 0.2; top:0%; width:200px;}
}

@-webkit-keyframes bubbleLarge {
    0% {opacity: 1.0; top:100%; width:100px;}
    100% {opacity: 0.2; top:0%; width:200px;}
}

@-o-keyframes bubbleLarge {
    0% {opacity: 1.0; top:100%; width:100px;}
    100% {opacity: 0.2; top:0%; width:200px;}
}

.bubbleLarge:nth-child(1){
	left:45%;
	animation-delay: .3s;
	-webkit-animation-delay: .3s;
	-moz-animation-delay: .3s;
	-o-animation-delay: .3s;
}

.bubbleLarge:nth-child(2){
	left:75%;
	animation-delay: .6s;
	-webkit-animation-delay: .6s;
	-moz-animation-delay: .6s;
	-o-animation-delay: .6s;
}

.bubbleLarge:nth-child(3){
	left:5%;
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-o-animation-delay: 1s;
}

.bubbleLarge:nth-child(4){
	left:25% !important;
	animation-delay: 1.2s;
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	-o-animation-delay: 1.2s;
}

.bubbleLarge:nth-child(5){
	left:90%;
	animation-delay: 1.6s;
	-webkit-animation-delay: 1.6s;
	-moz-animation-delay: 1.6s;
	-o-animation-delay: 1.6s;
}

.bubbleMedium:nth-child(6){
	left:90%;
	animation-delay: 1.4s;
	-webkit-animation-delay: 1.4s;
	-moz-animation-delay: 1.4s;
	-o-animation-delay: 1.4s;
}

.bubbleMedium:nth-child(7){
	left:35%;
	animation-delay: .4s;
	-webkit-animation-delay: .4s;
	-moz-animation-delay: .4s;
	-o-animation-delay: .4s;
}

.bubbleMedium:nth-child(8){
	left:65%;
	animation-delay: .3s;
	-webkit-animation-delay: .3s;
	-moz-animation-delay: .3s;
	-o-animation-delay: .3s;
}

.bubbleMedium:nth-child(9){
	left:75%;
	animation-delay: .4s;
	-webkit-animation-delay: .4s;
	-moz-animation-delay: .4s;
	-o-animation-delay: .4s;
}

.bubbleMedium:nth-child(10){
	left:15%;
	animation-delay: .5s;
	-webkit-animation-delay: .5s;
	-moz-animation-delay: .5s;
	-o-animation-delay: .5s;
}

.bubbleSmall:nth-child(11){
	left:30%;
	animation-delay: .2s;
	-webkit-animation-delay: .2s;
	-moz-animation-delay: .2s;
	-o-animation-delay: .2s;
}

.bubbleSmall:nth-child(12){
	left:40%;
	animation-delay: .3s;
	-webkit-animation-delay: .3s;
	-moz-animation-delay: .3s;
	-o-animation-delay: .3s;
}

.bubbleSmall:nth-child(13){
	left:25%;
	animation-delay: .2s;
	-webkit-animation-delay: .2s;
	-moz-animation-delay: .2s;
	-o-animation-delay: .2s;
}

.bubbleSmall:nth-child(14){
	left:10%;
	animation-delay: .1s;
	-webkit-animation-delay: .1s;
	-moz-animation-delay: .1s;
	-o-animation-delay: .1s;
}

.bubbleSmall:nth-child(15){
	left:20%;
	animation-delay: .3s;
	-webkit-animation-delay: .3s;
	-moz-animation-delay: .3s;
	-o-animation-delay: .3s;
}

.bubbleSmall:nth-child(16){
	left:60%;
	animation-delay: .1s;
	-webkit-animation-delay: .1s;
	-moz-animation-delay: .1s;
	-o-animation-delay: .1s;
}

.bubbleSmall:nth-child(17){
	left:70%;
	animation-delay: .3s;
	-webkit-animation-delay: .3s;
	-moz-animation-delay: .3s;
	-o-animation-delay: .3s;
}

.bubbleSmall:nth-child(18){
	left:55%;
	animation-delay: .1s;
	-webkit-animation-delay: .1s;
	-moz-animation-delay: .1s;
	-o-animation-delay: .1s;
}

.bubbleSmall:nth-child(19){
	left:85%;
	animation-delay: .1s;
	-webkit-animation-delay: .1s;
	-moz-animation-delay: .1s;
	-o-animation-delay: .1s;
}

.bubbleSmall:nth-child(20){
	left:90%;
	animation-delay: .3s;
	-webkit-animation-delay: .3s;
	-moz-animation-delay: .3s;
	-o-animation-delay: .3s;
}