<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Lightbox usage markup --> <link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" /> <h1>Pure CSS Lightbox</h1> <p>Click the thumbnail below to activate the lightbox</p> <!-- thumbnail image wrapped in a link --> <a href="#img1"> <img src="http://insomnia.rest/images/screens/main.png" class="thumbnail"> </a> <!-- lightbox container hidden with CSS --> <a href="#_" class="lightbox" id="img1"> <img src="http://insomnia.rest/images/screens/main.png"> </a> <p class="italic small">Image credit: Me</p>

html,body { font-family: 'Raleway', sans-serif; padding: 0 2em; font-size: 18px; background: #222; color: #aaa; text-align:center; } h1 { font-size: 3em; font-weight: 200; margin: 0.5em 0 0.2em 0; } p { margin: 1.5em 0; color: #888; } .thumbnail { max-width: 40%; } .italic { font-style: italic; } .small { font-size: 0.8em; } /** LIGHTBOX MARKUP **/ .lightbox { /** Default lightbox to hidden */ display: none; /** Position and style */ position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); } .lightbox img { /** Pad the lightbox image */ max-width: 90%; max-height: 80%; margin-top: 2%; } .lightbox:target { /** Remove default browser outline */ outline: none; /** Unhide lightbox **/ display: block; }