Can you blur the content beneath behind a div

Question

I m creating a new web design in Photoshop at the moment  but I d like to know if it s possible to blur the content beneath a div   I d like to create a half transparent nav bar on my page that s fixed at the top of your screen  Everything that flows beneath behind  I want to have blurred  For those of you that have an iDevice with iOS 7  check out Safari s header  where the page beneath the header is blurred  That s the effect what I m looking for   I wouldn t mind the effect not working on older browsers  IE8 etc    which in that case will have a 0 5 opacity white background as fallback   If this is possible  I m really looking for the necessary code

User · Answer

you can do this with css3  this blurs the whole element  div  or whatever element      -webkit-filter  blur 5px     -moz-filter  blur 5px     -o-filter  blur 5px     -ms-filter  blur 5px     filter  blur 5px       Fiddle  http   jsfiddle net H4DU4

User · Answer

If you want to enable unblur  you cannot just add the blur CSS to the body  you need to blur each visible child one level directly under the body and then remove the CSS to unblur  The reason is because of the  Cascade  in CSS  you cannot undo the cascading of the CSS blur effect for a child of the body  Also  to blur the body s background image you need to use the pseudo element  before    HTML   lt div id  fullscreen-popup  style  position absolute top 50  left 50    gt       lt div class  morph-button morph-button-overlay morph-button-fixed  gt           lt button id  user-interface  type  button  gt MORE INFO lt  button gt           lt  --a id  user-interface  href  javascript void 0   gt popup lt  a-- gt           lt div class  morph-content  gt               lt div gt                   lt div class  content-style-overlay  gt                       lt span class  icon icon-close  gt Close the overlay lt  span gt                       lt h2 gt About Parsley lt  h2 gt                       lt p gt Gumbo beet greens corn soko endive gumbo gourd  Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato  Dandelion cucumber earthnut pea peanut soko zucchini  lt  p gt                       lt p gt Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale  Celery potato scallion desert raisin horseradish spinach carrot soko  Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea  Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress  Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke  lt  p gt                       lt p gt Gumbo beet greens corn soko endive gumbo gourd  Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato  Dandelion cucumber earthnut pea peanut soko zucchini  lt  p gt                       lt p gt Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale  Celery potato scallion desert raisin horseradish spinach carrot soko  Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea  Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress  Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke  lt  p gt                       lt p gt Gumbo beet greens corn soko endive gumbo gourd  Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato  Dandelion cucumber earthnut pea peanut soko zucchini  lt  p gt                       lt p gt Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale  Celery potato scallion desert raisin horseradish spinach carrot soko  Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea  Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress  Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke  lt  p gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt     CSS     Blur - doesn t work on IE      blur-on   blur-element       -webkit-filter  blur 10px       -moz-filter  blur 10px       -o-filter  blur 10px       -ms-filter  blur 10px       filter  blur 10px        -webkit-transition  all 5s linear      transition          all 5s linear      -moz-transition     all 5s linear      -webkit-transition  all 5s linear      -o-transition       all 5s linear     blur-off       -webkit-filter  blur 0px   important      -moz-filter     blur 0px   important      -o-filter       blur 0px   important      -ms-filter      blur 0px   important      filter          blur 0px   important     blur-bgimage before       content          position  absolute      height  20   width  20       background-size  cover      background  inherit      z-index  -1       transform  scale 5       transform-origin  top left      filter  blur 2px              -moz-transform  scale 5       -moz-transform-origin  top left      -moz-filter  blur 2px              -webkit-transform  scale 5       -webkit-transform-origin  top left      -webkit-filter  blur 2px       -o-transform  scale 5       -o-transform-origin  top left      -o-filter  blur 2px               transition          all 5s linear      -moz-transition     all 5s linear      -webkit-transition  all 5s linear      -o-transition       all 5s linear        Javascript  function blurBehindPopup         if blurredElements length    0            for var i 0  i  lt  document body children length  i                  var element   document body children i               if element id  amp  amp  element id     fullscreen-popup   amp  amp  element isVisible    true                    classie addClass  element   blur-element                     blurredElements push element                                 else           for var i 0  i  lt  blurredElements length  i                  classie addClass  blurredElements i    blur-element                       function unblurBehindPopup         for var i 0  i  lt  blurredElements length  i              classie removeClass  blurredElements i    blur-element               Full Working Example Link

[css] Can you blur the content beneath/behind a div?

Examples related to css

Examples related to blur