CSS Lightbox Effect with One Line

lightbox

//*Overlay behind lightbox, if you have shadows (work around FF bug 480888): */

.box{
    box-shadow: /* other shadows here */, 0 0 0 9999px rgba(0,0,0,.3);
}

/*Overlay behind lightbox in one simple line: */
.box{
    outline: 9999px solid rgba(0,0,0,.3);
}
/*
and if I want to use a pseudo-element on top of another element, like using the "maximize" img
like I did on a wordpress post once, and I want the mouse to still be able to click on the
object below it: this means I don't want the pseudo-element to "capture" the mouse events,
I change its "pointer-events" property fro "auto" which is the default, to "none", so
heik biseer as far as the mouse is concerned, that object does not exist anymore!*/
.object-we-dont-want {
    pointer-events:none;
}
/*this can be used if I want to put an arrow image on top of the default arrow image in 
select lists*/