<div class="picture">
  <div class="blurry-box"></div>
  <div class="text">Live blurry box using one picture.</div>
</div>

<!-- damn firefox -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
        <feGaussianBlur stdDeviation="8" />
    </filter>
</svg>
@import url(https://fonts.googleapis.com/css?family=Lato:700);

// set image
$image: "https://24.media.tumblr.com/f74ff1d9acdf8c43cd1897e01bc669e6/tumblr_n2k114hDQX1st5lhmo1_1280.jpg";

// set text color
$text-color: #fff;

// set blur insentity
$blur-attr: 1em;

* { margin:0; padding:0; }

html,body { 
  width:100%;
  height:100%; 
}

.blurry-box {
  width: 102%;
  height: 8em;
  background: url($image) right 90em;
  content: "";
  position: absolute;
  bottom: 3.8em;
  background-position: right 12em;
  -webkit-filter: blur($blur-attr);
  // there is a hope for -moz-filter
  -moz-filter: blur($blur-attr);
  -o-filter: blur($blur-attr);
  filter: url(#blur);
  background-size: 100% auto;
  box-sizing: border-box;
  -moz-box-sizng: border-box;
  -moz-box-sizing: border-box;
  margin-left: -.9em;
  animation: run 30s linear infinite;
	-ms-animation: run 30s linear infinite;
	-moz-animation: run 30s linear infinite;
	-webkit-animation: run 30s linear infinite;
}
 
.picture {
  background: url($image) bottom right;
  width: 100%;
  height: 100%;
  position: relative;
  background-size: 100% auto;
  overflow:hidden;
  animation: run 30s linear infinite;
	-ms-animation: run 30s linear infinite;
	-moz-animation: run 30s linear infinite;
	-webkit-animation: run 30s linear infinite;
}
 
.text {
  position: absolute;
  bottom: 1.9em;
  font: 50px Lato;
  font-weight: 600;
  color: $text-color;
  z-index: 10;
  left: 1em;
}

// i'm lazy, shame
@media only screen and (max-width: 789px) {
  .text {
    bottom: 1.3em;
  }
}

@keyframes 
run {
  0% { background-size: 100% auto; }
	50% { background-size: 120% auto; }
	100% { background-size: 100% auto; }
}
@-webkit-keyframes
run {
  0% { background-size: 100% auto; }
	50% { background-size: 120% auto; }
	100% { background-size: 100% auto; }
}
@-ms-keyframes
run {
  0% { background-size: 100% auto; }
	50% { background-size: 120% auto; }
	100% { background-size: 100% auto; }
}
@-moz-keyframes
run {
  0% { background-size: 100% auto; }
	50% { background-size: 120% auto; }
	100% { background-size: 100% auto; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.