"Lightbox and Boostrap"
Bootstrap 4.1.1 Snippet by anvictor

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css" rel="stylesheet"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/js/lightgallery.js"></script> <!------ Include the above in your HEAD tag ----------> </head> <body> <section id="lookbook"> <div class="container h-100"> <div class="row h-100 justify-content-center align-items-center"> <div class="col-md-8" id="child_bg_main"> <div class="row justify-content-self"> <div class="col-md-12"> <div class="demo-gallery"> <ul id="lightgallery"> <li data-responsive="https://sachinchoolur.github.io/lightGallery/static/img/1-375.jpg 375, https://sachinchoolur.github.io/lightGallery/static/img/1-480.jpg 480, https://sachinchoolur.github.io/lightGallery/static/img/1.jpg 800" data-src="https://sachinchoolur.github.io/lightGallery/static/img/1-1600.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter "> <a href=""> <img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg"> <div class="demo-gallery-poster"> <img src="https://sachinchoolur.github.io/lightGallery/static/img/zoom.png"> </div> </a> </li> <li data-responsive="https://sachinchoolur.github.io/lightGallery/static/img/2-375.jpg 375, https://sachinchoolur.github.io/lightGallery/static/img/2-480.jpg 480, https://sachinchoolur.github.io/lightGallery/static/img/2.jpg 800" data-src="https://sachinchoolur.github.io/lightGallery/static/img/2-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter "> <a href=""> <img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-2.jpg"> <div class="demo-gallery-poster"> <img src="https://sachinchoolur.github.io/lightGallery/static/img/zoom.png"> </div> </a> </li> <li data-responsive="https://sachinchoolur.github.io/lightGallery/static/img/13-375.jpg 375, https://sachinchoolur.github.io/lightGallery/static/img/13-480.jpg 480, https://sachinchoolur.github.io/lightGallery/static/img/13.jpg 800" data-src="https://sachinchoolur.github.io/lightGallery/static/img/13-1600.jpg" data-sub-html="<h4>Sunset Serenity</h4><p>A gorgeous Sunset tonight captured at Coniston Water....</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter "> <a href=""> <img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-13.jpg"> <div class="demo-gallery-poster"> <img src="https://sachinchoolur.github.io/lightGallery/static/img/zoom.png"> </div> </a> </li> <li data-responsive="https://sachinchoolur.github.io/lightGallery/static/img/4-375.jpg 375, https://sachinchoolur.github.io/lightGallery/static/img/4-480.jpg 480, https://sachinchoolur.github.io/lightGallery/static/img/4.jpg 800" data-src="https://sachinchoolur.github.io/lightGallery/static/img/4-1600.jpg" data-sub-html="<h4>Coniston Calmness</h4><p>Beautiful morning</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter "> <a href=""> <img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-4.jpg"> <div class="demo-gallery-poster"> <img src="https://sachinchoolur.github.io/lightGallery/static/img/zoom.png"> </div> </a> </li> </ul> </div> </div> </div> </div> </div> </div> </section> </body> </html>
body { background: #F6F9FC; } .small { font-size: 11px; color: #999; display: block; margin-top: -10px } .cont { text-align: center; } .page-head { padding: 60px 0; text-align: center; } .page-head .lead { font-size: 18px; font-weight: 400; line-height: 1.4; margin-bottom: 50px; margin-top: 0; } .btn { -moz-user-select: none; background-image: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: normal; line-height: 1.42857; margin-bottom: 0; padding: 6px 12px; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; } .btn-lg { border-radius: 2px; font-size: 18px; line-height: 1.33333; padding: 10px 16px; } .btn-primary:hover { background-color: #fff; color: #152836; } .btn-primary { background-color: #152836; border-color: #0e1a24; color: #ffffff; } .btn-primary { border-color: #eeeeee; color: #eeeeee; transition: color 0.1s ease 0s, background-color 0.15s ease 0s; } .page-head h1 { font-size: 42px; margin: 0 0 20px; color: #FFF; position: relative; display: inline-block; } .page-head h1 .version { bottom: 0; color: #ddd; font-size: 11px; font-style: italic; position: absolute; width: 58px; right: -58px; } .demo-gallery > ul { margin-bottom: 0; padding-left: 15px; } .demo-gallery > ul > li { margin-bottom: 15px; width: 180px; display: inline-block; margin-right: 15px; list-style: outside none none; } .demo-gallery > ul > li a { border: 3px solid #FFF; border-radius: 3px; display: block; overflow: hidden; position: relative; float: left; } .demo-gallery > ul > li a > img { -webkit-transition: -webkit-transform 0.15s ease 0s; -moz-transition: -moz-transform 0.15s ease 0s; -o-transition: -o-transform 0.15s ease 0s; transition: transform 0.15s ease 0s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); height: 100%; width: 100%; } .demo-gallery > ul > li a:hover > img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } .demo-gallery > ul > li a:hover .demo-gallery-poster > img { opacity: 1; } .demo-gallery > ul > li a .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.1); bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background-color 0.15s ease 0s; -o-transition: background-color 0.15s ease 0s; transition: background-color 0.15s ease 0s; } .demo-gallery > ul > li a .demo-gallery-poster > img { left: 50%; margin-left: -10px; margin-top: -10px; opacity: 0; position: absolute; top: 50%; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .demo-gallery > ul > li a:hover .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.5); } .demo-gallery .justified-gallery > a > img { -webkit-transition: -webkit-transform 0.15s ease 0s; -moz-transition: -moz-transform 0.15s ease 0s; -o-transition: -o-transform 0.15s ease 0s; transition: transform 0.15s ease 0s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); height: 100%; width: 100%; } .demo-gallery .justified-gallery > a:hover > img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img { opacity: 1; } .demo-gallery .justified-gallery > a .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.1); bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background-color 0.15s ease 0s; -o-transition: background-color 0.15s ease 0s; transition: background-color 0.15s ease 0s; } .demo-gallery .justified-gallery > a .demo-gallery-poster > img { left: 50%; margin-left: -10px; margin-top: -10px; opacity: 0; position: absolute; top: 50%; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .demo-gallery .justified-gallery > a:hover .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.5); } .demo-gallery .video .demo-gallery-poster img { height: 48px; margin-left: -24px; margin-top: -24px; opacity: 0.8; width: 48px; } .demo-gallery.dark > ul > li a { border: 3px solid #04070a; }
// lightgallery $(document).ready(function() { $('#lightgallery').lightGallery({ pager: true }); });

Related: See More


Questions / Comments: