"pure css lightbox"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/roppazvan/pen/OXmqkm?limit=all&page=35&q=gallery" /> <style class="cp-pen-styles">body { margin: 0; } .background { background: url(http://wallpapercave.com/wp/k7r6fly.jpg); background-size: cover; background-repeat: no-repeat; height: 1000px; width: 100%; position: relative; top: 60px; } #header { height: 60px; width: 100%; background-color: #BDBDBD; font-family: 'Poiret one', cursive; font-size: 20px; position: fixed; z-index: 999; border-radius: 3px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #header a { text-decoration: none; color: black; float: right; margin-top: 15px; margin-left: 50px; margin-right: 30px; font-weight: bold; } #header img { height:50px; width: 70px; float: left; } #header a:hover { -webkit-transform: scale(1.4,1.4); transform: scale(1.4,1.4); text-decoration: overline; color: white; } .container { height: 768px; width: 100%; position: absolute; top: 110px; display: inline-block; text-align: center; } .small { height: 250px; width: 300px; position: relative; margin: 3px; border-radius: 5px; } .small:hover { -webkit-transform: scale(1.03, 1.03); transform: scale(1.03, 1.03); } .lightbox { display: none; position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0,0,0,0.7); } a div { position: relative; margin: auto auto; text-align: center; } .lightbox:target { display: -webkit-box; display: -ms-flexbox; display: flex; } .container a { text-decoration: none; } p { font-size: 20px; color: white; font-family: 'Poiret One'; } #footer { height: 30px; width: 100%; background-color: #BDBDBD; clear:both; color: black; font-family: 'Poiret one'; text-align: center; vertical-align: center; line-height: 30px; font-weight: bold; position: fixed; bottom: 0; } </style></head><body> <head> <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> </head> <div id="header"> <img src="https://image.spreadshirtmedia.com/image-server/v1/designs/1006501198,width=178,height=178,version=1454035730/Deer-Head:-White.png"/> <a class="nav" href="home.html">contact</a> <a class="nav"href="about.html">about</a> <a class="nav"href="gallery.html">gallery</a> <a class="nav" href="contact.html">home</a> </div> <div class="background"> <div class="container"> <a href="#img1"> <img class="small" src="http://www.earthtimes.org/newsimage/grizzly141113.jpg"> </a> <a href="#img2"> <img class="small" src="http://www.northwestmilitary.com/installations/explore/2012/01/See-bald-eagles-throughout-January-in-Skagit-County/uploads/articles/17264-banner-baldeagle.jpg"> </a> <a href="#img3"> <img class="small" src="http://photographyheat.com/wp-content/uploads/2012/12/Wildlife-Photos-1.jpg"> </a> <a href="#img4"> <img class="small" src="https://www.ephotozine.com/articles/british-wildlife-photography-awards---call-for-entries-21121/images/Fox-cub-by-Calum-Dickson.jpg"> </a> <a href="#img5"> <img class="small" src="http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2013/03/deer-wildlife-conservation-537x444.jpg"> </a> <a href="#img6"> <img class="small" src="http://rgbmag.com/wp-content/uploads/2013/02/1-Green-Eye-Leopard-500x375.jpeg"> </a> <a href="#img7"> <img class="small" src="https://i.telegraph.co.uk/multimedia/archive/03471/wildlife-fox-1_3471502k.jpg"> </a> <a href="#img8"> <img class="small" src="http://stylegerms.com/wp-content/uploads/2013/11/giraffe-wallpaper-3253-hd-wallpapers.jpg"> </a> <!--Lightboxes--> <a href="#_" class="lightbox" id="img1"> <div> <img src="http://www.earthtimes.org/newsimage/grizzly141113.jpg"/> <p> The mighty Bear </p> </div> </a> <a href="#_" class="lightbox" id="img2"> <div> <img src="http://www.northwestmilitary.com/installations/explore/2012/01/See-bald-eagles-throughout-January-in-Skagit-County/uploads/articles/17264-banner-baldeagle.jpg"/> <p> The eagle</p> </div> </a> <a href="#_" class="lightbox" id="img3"> <div> <img src="http://photographyheat.com/wp-content/uploads/2012/12/Wildlife-Photos-1.jpg"/> <p> The squirrel</p> </div> </a> <a href="#_" class="lightbox" id="img4"> <div> <img src="https://www.ephotozine.com/articles/british-wildlife-photography-awards---call-for-entries-21121/images/Fox-cub-by-Calum-Dickson.jpg"/> <p> The Fox</p> </div> </a> <a href="#_" class="lightbox" id="img5"> <div> <img src="http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2013/03/deer-wildlife-conservation-537x444.jpg"/> <p> The Stag</p> </div> </a> <a href="#_" class="lightbox" id="img6"> <div> <img src="http://rgbmag.com/wp-content/uploads/2013/02/1-Green-Eye-Leopard-500x375.jpeg"/> <p> The Jag</p> </div> </a> <a href="#_" class="lightbox" id="img7"> <div> <img src="https://i.telegraph.co.uk/multimedia/archive/03471/wildlife-fox-1_3471502k.jpg"/> <p> The White Fox</p> </div> </a> <a href="#_" class="lightbox" id="img8"> <div> <img src="http://stylegerms.com/wp-content/uploads/2013/11/giraffe-wallpaper-3253-hd-wallpapers.jpg"/> <p> The Giraffe</p> </div> </a> </div> </div> <div id="footer"> © Razvan Pop </div> </body></html>

Related: See More

Vue Argon Design System
Team Design Section with Pure CSS Effect
Login screen pure Bootstrap 4.0
Social-network style lightbox

Questions / Comments: