How to make this image blur with transparent dark background

Question

I want to implement the image like below image with css. I mean i want to make the image background appear but in front the image should be transparent. I mean it should be covered like blur. I want to achieve like below image.

img {
  -webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
position:fixed;
}

<div><img src="http://i.imgur.com/v06GqMK.jpg" /></div>

Answer 1

You can use CSS pseudo element or other html element to achieve this. Here's an example using the pseudo element :before

.blur {
  position: relative;
  display: inline-block; /* make the div not 100% */
}
/* the 'blur' effect */
.blur:before {
  content: '';
  background-color: #000;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
.blur img {
  display: block; /* remove bottom space */
}

<div class="blur">
  <img src="http://i.imgur.com/v06GqMK.jpg" />
</div>