Blurred Image Edge

by ajmeese7

HTML

<div class="placeholder">
    <!-- blurred background image for blurred edge -->
    <div class="bg-image-blur"></div>
    <!-- same image, no blur -->
    <div class="bg-image"></div>
    <!-- content -->
    <div class="content">Blurred Image Background</div>
</div>

CSS

.placeholder {
    margin-right: auto;
    margin-left:auto;
    margin-top: 20px;
    width: 500px;
    height: 500px;
    position: relative;
    /* this is the only relevant part for the example */
}
/* both DIVs have the same image */
 .bg-image-blur, .bg-image {
    background-image: url('http://lorempixel.com/200/200/city/9');
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
}
.bg-image {
   width: 200px;
   height: 200px;
   left: 30%;
   top: 30%;
   position: relative;
}
/* blur the background, to make blurred edges that overflow the unblurred image that is on top */
 .bg-image-blur {
    -webkit-filter: blur(50px);
    -moz-filter: blur(50px);
    -o-filter: blur(50px);
    -ms-filter: blur(50px);
    filter: blur(50px);
}

 .content {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-shadow: 0 0 3px #000;
    text-align: center;
    font-size: 30px;
}