CSS3 Lightbox

Create a Lightbox effect only with CSS3 - no javascript needed

<style>
html, body {
height: 100%;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
}
body {
overflow-y: auto;
}

.lightbox {
display:none;
}

.lightbox:target{
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute;
display: block;
}
.lightbox:target .close a {
background: rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute;
z-index: 1;
}

.close span {
color: #fff;
position: absolute;
right: 20px;
top: 20px;
font-size:20px;
}

.lightbox:target div {
background: #fff;
position: absolute;
z-index: 99;
}
.popbox {
position: absolute;
left: 50%;
top: 50%;
width: 600px;
height: 300px;
margin-left: -300px;
margin-top: -150px;
background-color: #fff;
}
</style>
<a href=#open>OPEN</a>

<div class=lightbox id=open>
<div class=popbox>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis felis suscipit tellus euismod quis ut nibh. Curabitur in ante nunc, vitae venenatis dui. Phasellus egestas ipsum in ipsum suscipit volutpat. Etiam eu nibh eros. Sed dolor ligula, tincidunt vitae elementum vitae, pharetra vitae eros. Cras risus lectus, aliquam vitae condimentum id, feugiat eu nisi. Cras eu sem erat, eget ultrices enim. Suspendisse feugiat fringilla massa at convallis. Quisque tincidunt, diam quis facilisis volutpat, purus orci rutrum leo, id dapibus tellus ante vel mauris. Quisque posuere, tortor in laoreet hendrerit, ipsum sem molestie nunc, et ultrices erat nulla sed dui. Donec sit amet mi sapien. Maecenas fermentum nulla eu ligula dictum id elementum nisi commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ac massa quam. Suspendisse nibh nibh, condimentum a porttitor a, placerat in lorem. Sed sit amet elit eget magna condimentum posuere volutpat a neque.</p>
</div>

<p class=close><a href='#'>Close <span>X</span></a></p>

Related Posts

CSS3 Columns, CSS3 RGBA, CSS3 Fade, CSS3 Accordion, CSS3 Shapes