overflowstack9 overflowstack9 - 1 year ago 160
CSS Question

How to make this image blur with transparent dark background

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);

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

Answer Source

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" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download