bg blur

HTML

<div class="bg">
    <div class="wrapper">
        <div class="itemLeft">
            <div class="item"></div>
            <img src="http://placehold.it/128x150/a00000" />
        </div>
        <div class="itemLeft">
            <div class="item"></div>
            <img src="http://placehold.it/128x150/f00000" />
        </div>
    </div>
</div>

CSS

.bg {
    width:100%;
    padding:70px 0px 70px 0px;
}
.wrapper {
    width:94%;
    max-width:800px;
    margin:0px auto;
}
.itemLeft {
    width:48%;
    background-color:#777;
    float:left;
    margin-left:1%;
    margin-right:1%;
    position: relative;
    text-align: center;
}
.item {
    width: 100%;
    background: url("http://lorempixel.com/300/150/sports/") center center / auto auto no-repeat;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
.wrapper img {
    position: relative;
    vertical-align: top;
}
.itemLeft:hover .item {
    cursor:pointer;
    width:100%;
    background-position:center center;
    text-align:center;
    background-image:url("http://lorempixel.com/300/150/sports/");
    background-repeat: no-repeat;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}