CSS Blur Div but not text - underlying image must be visible behind div

Question

Basically I am wanting to mimic this effect using css.

Here is a picture:

Requirements:

Must be semi transparent to allow image below to show slightly
Text within must not be blurred

I have tried using the css filter property but it blurs any content within the element it is applied on. The hard part is getting the image below to show through without using a background image on the overlaying div.

Any help is much appreciated.

Possible duplicate - http://stackoverflow.com/questions/19375311/div-blur-of-part-of-backgroung-image-with-css?rq=1 — Paulie_D, Jul 22 '14 at 19:19
If you insert text into the js fiddle found in that answer you will see that it is also blurred. This is the problem that I have. Thanks. — Haden Hiles, Jul 24 '14 at 12:54

score 3 · Accepted Answer · answered Jul 22 '14 at 19:42

If the text is inside the div that is being blurred you cannot restrict that because the text starts at the same blur as that div. What you should consider doing is doubling the div and positioning it absolutely inside a relative container div which is positioned in the right place. Then blur the top div and keep the other div none blurred, because they are both positioned absolutely they will be on top of each other, you may need to user top:0px, example of the div setup.

 <div> - relative div, this keeps the other divs in the right position.
      <div>Absolute and blurred</div>
      <div>Absolute and not blurred - contains text</div>
 </div>

CSS Blur Div but not text - underlying image must be visible behind div

1 Answers1