"gallery"
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/hrtzt/pen/vGqEJO?limit=all&page=65&q=gallery" /> <meta name="author" content="Alberto Hartzet"> <link href='https://fonts.googleapis.com/css?family=Roboto:100,400,700' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'> <style class="cp-pen-styles">body { font-family: 'Roboto', sans-serif; } #wrapper { width: 80%; margin: auto; } /* Top Bar */ .top-bar { height: 62px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; width: 100%; top: 0; left: 0; box-sizing: border-box; padding: 0 22px; font-size: 18px; color: gray; } .material { position: relative; width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; cursor: pointer; } .material .material-back { background: whitesmoke; width: 100%; height: 100%; border-radius: 40px; display: block; position: absolute; z-index: 0; -webkit-transition: all .25s linear; transition: all .25s linear; -webkit-transform: scale(0); transform: scale(0); } .material:active .material-back { -webkit-transform: scale(1) !Important; transform: scale(1) !Important; } .material .icon { z-index: 1; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .top-bar .icon { font-size: 16px; } .top-bar .icon:not(:last-child) { padding-right: 22px; } .top-bar #share { font-size: 11px; opacity: .5; } .top-bar #share .text { margin-left: 3px; } /* Header */ header { height: 350px; line-height: 1.5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } header .title { font-size: 42px; } header .date { font-size: 11px; color: gray; } .location { height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; bottom: 32px; width: 100%; } .location .icon { color: tomato; } .location .place { margin: 0 6px; color: gray; } /* Gallery - the only code needed to build the gallery */ .gallery { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin: auto; } .gallery .gallery-item { height: inherit; max-width: 100%; background: gray; border: 2px solid white; background-size: cover; background-position: center top; } .gallery .gallery-item { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; } .gallery .gallery-item img { height: auto; width: 100%; max-height: 300px; width: auto; visibility: hidden; } /* Fancy stuff for the gallery */ .gallery-item { position: relative; cursor: pointer; -webkit-transition: all .1s linear; transition: all .1s linear; } .gallery-item:focus { -webkit-transform: scale(.95); transform: scale(.95); } .gallery-item:before, .gallery-item:after { position: absolute; -webkit-transition: all .25s linear; transition: all .25s linear; opacity: 0; } .gallery-item:hover:before, .gallery-item:hover:after { opacity: 1; } .gallery-item:before { content: ""; width: 100%; height: 50px; background: -webkit-linear-gradient(top, rgba(0,0,0,0.15), rgba(255, 215, 0, 0) ); background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(255, 215, 0, 0) ); } .gallery-item:after { font-family: fontawesome; font-size: 20px; color: white; content: "\f058"; top: 25px; left: 25px; } .gallery-item:focus:after { color: #42A5FF; } /* Headers */ section.heading { padding: 62px 0; font-size: 20px; text-align: center; color: gray; } </style></head><body> <div id="wrapper"> <div class="top-bar"> <div class="left"> <div class="material"><span class="material-back"></span><span class="icon back fa fa-arrow-left"></span></div> </div> <div class="rigth"><span class="icon" id="share"><i class="fa fa-users"> </i><i class="text">Compartidas</i></span><span class="icon fa fa-plus-square"></span><span class="icon fa fa-share-alt"></span><span class="icon fa fa-bars"></span></div> </div> <header> <h1 class="title">Google photos album view with only CSS</h1><span class="date">18 de Mayo de 2016 </span> <section class="location"><span class="icon fa fa-map-marker"> </span><span class="place"><a href="http://www.albertohartzet.com" target="_blank" style="text-decoration:none; color: inherit">albertohartzet.com</a></span></section> </header> <div class="gallery"><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/1f/4c/93/1f4c93b0816e4277ef7d882ef24c0d10.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/1f/4c/93/1f4c93b0816e4277ef7d882ef24c0d10.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://d13yacurqjgara.cloudfront.net/users/6033/screenshots/2764571/dribbble_krol.gif')"><img src="https://d13yacurqjgara.cloudfront.net/users/6033/screenshots/2764571/dribbble_krol.gif"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/23/d2/ec/23d2ec5d9afe03438a29c3ff3b007b60.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/23/d2/ec/23d2ec5d9afe03438a29c3ff3b007b60.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/236x/19/12/f7/1912f73796ec5107a6cc7ede0b917f9f.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/236x/19/12/f7/1912f73796ec5107a6cc7ede0b917f9f.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/1b/b6/48/1bb648c481df070f0a6b4a9f14fc3b9f.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/1b/b6/48/1bb648c481df070f0a6b4a9f14fc3b9f.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/3c/63/06/3c630674a71fd32541e41365953e902e.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/3c/63/06/3c630674a71fd32541e41365953e902e.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/78/41/3f/78413ff949ace8c2c85e3a53ac93a340.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/78/41/3f/78413ff949ace8c2c85e3a53ac93a340.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/83/59/d8/8359d80c708fc500916824dfcdc8cd51.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/83/59/d8/8359d80c708fc500916824dfcdc8cd51.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/236x/a8/85/cf/a885cfbe15d5e2de4ee725a25c109cfa.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/236x/a8/85/cf/a885cfbe15d5e2de4ee725a25c109cfa.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/58/54/0c/58540c8382dcd5ee976d61f6fa6be2a3.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/58/54/0c/58540c8382dcd5ee976d61f6fa6be2a3.jpg"/></a></div> <section class="heading"> <h3>This thing is responsive, try it out!</h3> </section> <div class="gallery"> <a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/79/4f/1b/794f1b3ca6ef74b4ef851d2d5414f56e.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/79/4f/1b/794f1b3ca6ef74b4ef851d2d5414f56e.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/e7/a4/f6/e7a4f6053aa41a6fe7b53bf0df90435d.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/e7/a4/f6/e7a4f6053aa41a6fe7b53bf0df90435d.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/d1/3d/71/d13d7133c77b3f68086baca33f803725.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/d1/3d/71/d13d7133c77b3f68086baca33f803725.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/b6/5f/0a/b65f0ad3b4af916cbafd20b3dc200efd.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/b6/5f/0a/b65f0ad3b4af916cbafd20b3dc200efd.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/71/8c/25/718c25a080fc2ebe1223a389343e35e5.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/71/8c/25/718c25a080fc2ebe1223a389343e35e5.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/24/68/09/2468093368e0220d6b71cee55ee78030.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/24/68/09/2468093368e0220d6b71cee55ee78030.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/236x/c8/22/5b/c8225b2c3d16cf65bdcda37f00ab8596.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/236x/c8/22/5b/c8225b2c3d16cf65bdcda37f00ab8596.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/91/c9/e7/91c9e76bb090b1b494fdce67ec3819ee.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/91/c9/e7/91c9e76bb090b1b494fdce67ec3819ee.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/236x/59/56/b9/5956b9caed0d1041eb486b34e4bbbbb5.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/236x/59/56/b9/5956b9caed0d1041eb486b34e4bbbbb5.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/9f/b1/32/9fb1329bb0c2cd400a1226ab913eb061.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/9f/b1/32/9fb1329bb0c2cd400a1226ab913eb061.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/4a/67/f5/4a67f52634f10f42b81c0df5bc43f53d.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/4a/67/f5/4a67f52634f10f42b81c0df5bc43f53d.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/3d/3e/eb/3d3eebba4288e2e8435c54fc723e57a1.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/3d/3e/eb/3d3eebba4288e2e8435c54fc723e57a1.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/f9/37/df/f937df0d6e504968f7f4e19938a35f6d.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/f9/37/df/f937df0d6e504968f7f4e19938a35f6d.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/b2/b5/a0/b2b5a09209336ea9b3a8adfab28414a8.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/b2/b5/a0/b2b5a09209336ea9b3a8adfab28414a8.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://d13yacurqjgara.cloudfront.net/users/784/screenshots/2707272/instagram2.jpg')"><img src="https://d13yacurqjgara.cloudfront.net/users/784/screenshots/2707272/instagram2.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/26/e6/14/26e614fba77c47c54246ca143dbe65fa.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/26/e6/14/26e614fba77c47c54246ca143dbe65fa.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/aa/fb/9e/aafb9e3e0a9e78b1afc6bbb08ef26e0f.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/aa/fb/9e/aafb9e3e0a9e78b1afc6bbb08ef26e0f.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/79/6b/ac/796bac332a6ed15e38027c09f049c9f4.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/79/6b/ac/796bac332a6ed15e38027c09f049c9f4.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/57/c6/7b/57c67b46d484a977d5e8b3bc4f28f311.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/57/c6/7b/57c67b46d484a977d5e8b3bc4f28f311.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://d13yacurqjgara.cloudfront.net/users/116339/screenshots/2501728/dribbble-shot-metro-mexico.png')"><img src="https://d13yacurqjgara.cloudfront.net/users/116339/screenshots/2501728/dribbble-shot-metro-mexico.png"/></a><a class="gallery-item" href="#" style="background-image: url('https://d13yacurqjgara.cloudfront.net/users/116339/screenshots/2501854/dribbble-shot-liebre.png')"><img src="https://d13yacurqjgara.cloudfront.net/users/116339/screenshots/2501854/dribbble-shot-liebre.png"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/236x/35/b5/6f/35b56fa84737eadee2114d1773130a3e.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/236x/35/b5/6f/35b56fa84737eadee2114d1773130a3e.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/77/82/23/77822379a2b1b48046a4be3a1944ae6e.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/77/82/23/77822379a2b1b48046a4be3a1944ae6e.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/f9/96/ef/f996ef0332737e850d1fae3275721d78.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/f9/96/ef/f996ef0332737e850d1fae3275721d78.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/13/92/71/139271ccdb77c3f141cb45ee4bd49f80.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/13/92/71/139271ccdb77c3f141cb45ee4bd49f80.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/7f/3b/77/7f3b77c5cc4b4bd6166c04ef6495952a.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/7f/3b/77/7f3b77c5cc4b4bd6166c04ef6495952a.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/a6/12/b8/a612b8d912abe4904533298885986d33.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/a6/12/b8/a612b8d912abe4904533298885986d33.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/fb/73/3b/fb733b1f8ef605370fb8f257dfc19b77.jpg')"><img src="https://s-media-cache-ak0.pinimg.com/564x/fb/73/3b/fb733b1f8ef605370fb8f257dfc19b77.jpg"/></a><a class="gallery-item" href="#" style="background-image: url('https://d13yacurqjgara.cloudfront.net/users/51395/screenshots/2658873/attachments/534232/samo_vidic_photography_l.jpg')"><img src="https://d13yacurqjgara.cloudfront.net/users/51395/screenshots/2658873/attachments/534232/samo_vidic_photography_l.jpg"/></a></div> </div> </body></html>

Related: See More

Now UI Kit
arrow key navigation thumbnail gallery modal view
masonry Image Gallery
Portfolio Gallery with filtering category

Questions / Comments: