Blur - CSS blur

CSS blur applied to a HTML element

by Vloxxity

HTML

<img src="http://farm2.staticflickr.com/1066/5115966185_d959a267bd_b.jpg" alt="Blur" height="560" width="840" />
<div id="box1" class="box">
    <div class="blur"></div>
    <div class="wall"></div>
    <div class="content">content1</div>
</div>
<div id="box2" class="box">
    <div class="blur"></div>
    <div class="wall"></div>
    <div class="content">content2</div>
</div>
<div id="box3" class="box">
    <div class="blur"></div>
    <div class="wall"></div>
    <div class="content">content3</div>
</div>

CSS

.blur {
    background-image: url(http://farm2.staticflickr.com/1066/5115966185_d959a267bd_b.jpg);
    background-size: 840px 560px;
    -webkit-filter: blur(10px);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    min-height: 100%;
    min-width: 100%;
}
.content {
    position: absolute;
    z-index: 3;
}
.box {
    position: absolute;
    color: #FFF;
    width: 100px;
    height: 100px;
}
.wall {
    background-color: #fff;
    opacity: 0.15;
    position: absolute;
    z-index: 2;
    min-height: 100%;
    min-width: 100%;
}
#box1 {
    left: 100px;
    top: 100px;
}
#box1 .blur {
    background-position: -100px -100px;
}
#box2 {
    left: 220px;
    top: 150px;
}
#box2 .blur {
    background-position: -220px -150px;
}
#box3 {
    left: 100px;
    top: 400px;
}
#box3 .blur {
    background-position: -100px -400px;
}