Question

I can do an overlay effect on my elements using the CSS

html:after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .6;
    background: #000;
    pointer-events: none;
    z-index: 1;
}

How can I make a “blurred” overlay effect, in a similar vein to this? (Note: I do not want to be using images. I would like to blur, for example, a rendered paragraph.)

Answer 1

You have 2 ways to do this:

1.) Use a different background for the whole page and the considered wrapper div.

2.) Use the jQuery .blurimage function:

JS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.blurimage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
      $(".blurimg").blurimage();
});

</script>

HTML:

<img src="test.png" alt="test" class="blurimg">

Hope this helps.

[Link to the plugin: http://plugins.jquery.com/project/blurimage%5D