Responsive cross browser lightbox using only html and css

There are many great lightbox plugins out there, however lots of them rely on jQuery or other libraries. Also another negative aspect is that they use JavaScript for the resizing and other parts which really isn't needed. So how can we make our own css only efficient lightbox overlay, which works cross browser IE8+?


Firstly we need the html wrappers for the content. We have four wrappers for the background, scrollable area, centering vertically and centering horizontal.

<div class="overlay">
    <div class="t">
        <div class="tc">
            <div class="content">
                <h1>This is the lightbox overlay</h1>
                <p>Check it at different sizes to see how it works</p>
            </div>
        </div>
    </div>
</div>

Now we add some css to the background outer wrapper, to position it on top and fill the screen with black:

.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 5;
    overflow: auto;
    background: rgb(76, 76, 76);
    background-color: rgba(0, 0, 0, 0.8);
}

Then the css added to the inner wrapper allows the content to be aligned vertically and horizontally:

.overlay .t {
    margin: auto;
    display: table;
    width: 100%;
    height: 100%;
}

.overlay .tc {
    display: table-cell;
    vertical-align: middle;
}

And finally the content wrapper can then restrict the content width and style the lightbox background/padding depending on the content type:

.overlay .content {
    max-width: 680px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
}

Here's how that looks so far:

http://jsfiddle.net/kmturley/m2vEN/2/show/

If you want a different background, rather than a black background you can blur the content behind using the following code:

<div class="page toblur blur">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae quam in enim volutpat pulvinar.</p>
</div>

You then add the css to blur the background. The blur class can be added and removed to trigger the animation effect:

.toblur {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    -webkit-transition: all ease-out 0.2s;
    -moz-transition: all ease-out 0.2s;
    -o-transition: all ease-out 0.2s;
    -ms-transition: all ease-out 0.2s;
    transition: all ease-out 0.2s;
}

.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

Here's how that looks now:

http://jsfiddle.net/kmturley/m2vEN/3/

If you need margins around the lightbox:

Flexbox version (IE11 align top as it doesn't support the margin: auto fix) https://jsfiddle.net/kmturley/570ka9Lq/1/

Tablecell version (Works well in all browsers)
http://jsfiddle.net/kmturley/m2vEN/12/