Blur Images on Popup

Question

Is there any way on a pop up to not just blur the text, but images in the background? I have attached a visual. enter image description here

maybe this question could help you out? -> http://stackoverflow.com/questions/371209/full-page-blur-in-css though it's pretty dated. there are css-filters which can be used for a blur effect in new (dev?) - builds of Chrome (prefixed with -webkit-) — GNi33, Jun 14 '12 at 17:45

score 5 · Answer 1 · answered Jun 14 '12 at 17:53

5

Maybe blur.js can help you out !!

Lookout for the demo.

answered Jun 14 '12 at 17:53

Viren Rajput

5,426
5
30
41

woah, have a look at the markup, this base64-encoded background is crazy. But it's a nice find, +1 :) – GNi33 Jun 14 '12 at 18:10

score 1 · Answer 2 · answered Jun 15 '12 at 04:41

1

This is what you are looking for. CSS3 Lightbox.

They have made a similar implementation of a popup and then blurring the background. Check it out. I am sure it will help with what you are doing.

answered Jun 15 '12 at 04:41

Aniket

9,622
5
40
62

score 0 · Answer 3 · answered Mar 15 '13 at 10:47

This is how stackoverflow does it.

HTML

<div class="popup">

    <div class="blur-bg"></div>

    <div class="popup-win"><img src="foo.jpg"/></div>
</div>

CSS

    .blur-bg{
            position: absolute;
            top: 0px;
            z-index: 1000;
            opacity: 0.5;
            height: 2323px;
            left: 0px;
            width: 100%;
            background-color: black;
        }
    .popup-win{
            position: fixed;
            width: 400px;
            z-index: 1001;
            top: 50%;
            left: 50%;
            display: block;
            margin-top: -85px;
            margin-left: -215px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
            background-color: #fff;
            padding: 15px!important;
        }

Blur Images on Popup

3 Answers3