"Photo Gallery"
Bootstrap 3.0.0 Snippet by xanar

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> <!-- Pulled from http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/ --> <html lang="en-US"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Responsive Tiled Photo Gallery</title> <!-- Enable media queries for old IE --> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> </head> <body class="no-touch"> <div class="wrap"> <!-- Define all of the tiles: --> <div class="box"> <div class="boxInner"> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" /> <div class="titleBox">Butterfly</div> </div> </div> <div class="box"> <div class="boxInner"> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" /> <div class="titleBox">An old greenhouse</div> </div> </div> <div class="box"> <div class="boxInner"> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" /> <div class="titleBox">Purple wildflowers</div> </div> </div> <div class="box"> <div class="boxInner"> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" /> <div class="titleBox">A birdfeeder</div> </div> </div> <div class="box"> <div class="boxInner"> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg" /> <div class="titleBox">Crocus close-up</div> </div> </div> <div class="box"> <div class="boxInner"> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" /> <div class="titleBox">The garden shop</div> </div> </div> <div class="box"> <div class="boxInner"> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg" /> <div class="titleBox">Spring daffodils</div> </div> </div> <div class="box"> <div class="boxInner"> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" /> <div class="titleBox">Iris along the path</div> </div> </div> <div class="box"> <div class="boxInner"> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" /> <div class="titleBox">The garden blueprint</div> </div> </div> <div class="box"> <div class="boxInner"> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg" /> <div class="titleBox">The patio</div> </div> </div> <div class="box"> <div class="boxInner"> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg" /> <div class="titleBox">Bumble bee collecting nectar</div> </div> </div> <div class="box"> <div class="boxInner"> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/12.jpg" /> <div class="titleBox">Winding garden path</div> </div> </div> </div> <!-- /#wrap --> </body> </html>
body { margin: 0; padding: 0; background: #EEE; font: 10px/13px 'Lucida Sans',sans-serif; } .wrap { overflow: hidden; margin: 10px; } .box { float: left; position: relative; width: 20%; padding-bottom: 20%; } .boxInner { position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; overflow: hidden; } .boxInner img { width: 100%; } .boxInner .titleBox { position: absolute; bottom: 0; left: 0; right: 0; margin-bottom: -50px; background: #000; background: rgba(0, 0, 0, 0.5); color: #FFF; padding: 10px; text-align: center; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox { margin-bottom: 0; } @media only screen and (max-width : 480px) { /* Smartphone view: 1 tile */ .box { width: 100%; padding-bottom: 100%; } } @media only screen and (max-width : 650px) and (min-width : 481px) { /* Tablet view: 2 tiles */ .box { width: 50%; padding-bottom: 50%; } } @media only screen and (max-width : 1050px) and (min-width : 651px) { /* Small desktop / ipad view: 3 tiles */ .box { width: 33.3%; padding-bottom: 33.3%; } } @media only screen and (max-width : 1290px) and (min-width : 1051px) { /* Medium desktop: 4 tiles */ .box { width: 25%; padding-bottom: 25%; } } .selectableImageContainer { border: 1px solid #CCC; padding: 5px; margin: 7px; float: left; width: 212px; text-align: center; } .zoom_toolbar_button { height: 32px; width: 32px; float: right; border-radius: 4px; margin-left: 2px; margin-top: 8px; cursor: pointer; border: 1px solid #000000; padding: 6px 0 0 3px; } .approved_image_toolbar_button { background-color: #8bc249; height: 32px; width: 32px; float: right; border-radius: 4px; margin-left: 2px; margin-top: 8px; cursor: pointer; padding: 6px 0 0 3px; } .disapproved_image_toolbar_button { background-color: #bb232a; height: 32px; width: 32px; float: right; border-radius: 4px; margin-left: 2px; margin-top: 8px; cursor: pointer; padding: 6px 0 0 1px; } .reviewIssuesButton { margin-left: 20px; color: #ffffff; background-color: #00aeef; } .markAllReviewed { background-color: #00aeef; margin-bottom: 20px; margin-top: 10px; color: #ffffff; } .white { color: #ffffff; }

Related: See More

Material Kit React
arrow key navigation thumbnail gallery modal view
masonry Image Gallery
Portfolio Gallery with filtering category

Questions / Comments: