How to make a blur effect over a background

Question

I have a video background on my website, which want to have a blur overlay over it. Something like IOS7 Notification Center. Since I could not do it by Photoshop. I thought to use blur effect in CSS. It seems also doesn not do what I want.

However, I made a div class width 100% height and width. and choose white color as background, then gave it the blur element. It does not work the way I want, anyway.

#blur{
width: 100%;
height: 100%;
z-index: -1;
position: fixed;
background: #FFF;
top: 0;
filter:blur(350px);
  -o-filter:blur(350px);
  -ms-filter:blur(350px);
  -moz-filter:blur(350px);
  -webkit-filter:blur(350px);
}

HTML : <div id="blur">&nbsp;</div>

This is an example like what I am looking for: http://wpuploads.appadvice.com/wp-content/uploads/2013/06/117.jpg Any idea?

Answer 1

A CSS blur filter will blur what's part of the layer, not what's behind or in front of the layer. So you may need to apply this type of filter directly to the video container.

I'm not 100% sure this is your issue since no HTML was added to the question.

UPDATE:

I just tested this on YouTube.com and if I apply a blur filter directly to the <video /> element, the video plays blurred.

Answer 2

Don't think i understand the question correctly. But if you want a white layer on top of the video you need to add the opacity property in your css code, to give the effect of a transparent overlay.

opacity: 0.4;

Your code should then look like

#blur{
   width: 100%;
   height: 100%;
   z-index: -1;
   position: fixed;
   background: #FFF;
   top: 0;
   filter:blur(350px);
     -o-filter:blur(350px);
     -ms-filter:blur(350px);
     -moz-filter:blur(350px);
     -webkit-filter:blur(350px);
   opacity: 0.4;
}