Pure CSS3 Overlay

Here i show you how to create pure CSS3 overlays this uses the :target pseudo class

by aflynt

HTML

<a href="#overlay" id="open-overlay">Open Overlay</a>

<div id="overlay">
    <a href="#" class="close">&times;</a>
    <div style="height:20%"></div>
    
    <h2 style="font-size:35px">Pure CSS Overlay</h2>
    <br />
    <br />
    <br />
    <p style="font-size:22px;">This overlay is made using zero javascript. With the CSS :target pseudo class. You can target an element then change it's properties. Here we hide this div then show it upon targeting. (see the URL). To exit we'll just change the URL back!</p>
    
</div>
<div id="mask" onclick="document.location='#';"></div> <!-- the only javascript -->

CSS

*{margin:0;padding:0;}
#overlay{ /* we set all of the properties for are overlay */
    height:80%;
    width:80%;
    margin:0 auto;
    background:transparent;
    color:black;
    padding:10px;
    position:absolute;
    top:5%;
    left:10%;
    z-index:1000;
    display:none;
    /* CSS 3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#mask{ /* create are mask */
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
    display:block;
    opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
    display:block;
    position:absolute;
    top:-20px;
    right:-20px;
    background:red;
    color:white;
    height:40px;
    width:40px;
    line-height:40px;
    font-size:35px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    -o-border-radius:40px;
    border-radius:40px;
}
#open-overlay{ /* open the overlay */
    padding:10px 5px;
    background:blue;
    color:white;
    text-decoration:none;
    display:inline-block;
    margin:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

JavaScript

/*
this is javascript free .. almost.
Here i show you how to create pure CSS3 overlays
this uses the :target pseudo class
*/