JSFiddle - React, Tailwind, and code Playground

by davidmurdoch

HTML

<div id="content">
    <a href="#" id="modal-open">Click me to view blur effect</a>.<br>
    
    Look, an iframe:<br>
    <iframe src="http://davidmurdoch.com/" bgcolor="#fff"></iframe><br>
    
    *Gasp* A VIDEO! (click the box below to play)<br>
    <video id="video">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></source>
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_640x360.m4v"></source>
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_h264.mov"></source>
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg"></source>
    </video>
</div>
<div id="overlay">
    <div id="modal-outer">
        <div id="modal-inner">
            Hello World! (blur effect visible in FF4+ only)
            <br>
            <br>
            <a href="#" id="modal-close">Close</a>
        </div>
    </div>
</div>

CSS

/* this is where the magic happens... */
#overlay{
    position:absolute;
    display:none;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-image:-moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content),
        -moz-element(#content);
    background-position:0 0,
        0 1px,
        0 2px,
        0 3px,
        0 -1px,
        0 -2px,
        0 -3px,
        
        1px 0,
        1px 1px,
        1px 2px,
        1px 3px,
        1px -1px,
        1px -2px,
        1px -3px,
        
        -1px 0,
        -1px 1px,
        -1px 2px,
        -1px 3px,
        -1px -1px,
        -1px -2px,
        -1px -3px,
        
        2px 0,
        2px 1px,
        2px 2px,
        2px -1px,
        2px -2px,
        
 ...

JavaScript

var $ = function(id) {
    return document.getElementById(id);
},
    overlay = $("overlay"),
    content = $("content");

$("video").onclick = function() {
    this.paused ? this.play() : this.pause();
};

// display the blurred overlay
$("modal-open").onclick = function() {
    overlay.style.display = "block";
    content.style.opacity = 0.048;
    return false;
};

// hide the blurred overlay
$("modal-close").onclick = function() {
    overlay.style.display = "none";
    content.style.opacity = "";
    return false;
};