Skip to content
Graphics
Photos
Logo’s
Fonts
Codes
Audios
Graphics
Photos
Logo’s
Fonts
Codes
Audios
Facebook
X-twitter
Youtube
Pinterest
Submit
HTML
CSS
JS
Copy
Run
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Image Gallery (Bootstrap 4 + Magnific Popup)</title> <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Sans:400,700'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css'> <style> /* Only for demo purposes. */ body { font-family: "Fira Sans", sans-serif; background-color: #f1f1f1; margin: 85px 0; } /* Start Gallery CSS */ .thumb { margin-bottom: 15px; } .thumb:last-child { margin-bottom: 0; } /* CSS Image Hover Effects: https://www.nxworld.net/tips/css-image-hover-effects.html */ .thumb figure img { filter: grayscale(100%); transition: .3s ease-in-out; } .thumb figure:hover img { filter: grayscale(0); } </style> </head> <body> <!-- partial:index.partial.html --> <section class="container"> <h1 class="my-4 text-center text-lg-left">Image Gallery</h1> <div class="row gallery"> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://picsum.photos/940/650?random=1"> <figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=1" alt="Random Image"></figure> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://picsum.photos/940/650?random=2"> <figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=2" alt="Random Image"></figure> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://picsum.photos/940/650?random=3"> <figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=3" alt="Random Image"></figure> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://picsum.photos/940/650?random=4"> <figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=4" alt="Random Image"></figure> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://picsum.photos/940/650?random=5"> <figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=5" alt="Random Image"></figure> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://picsum.photos/940/650?random=6"> <figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=6" alt="Random Image"></figure> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://picsum.photos/940/650?random=6"> <figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=6" alt="Random Image"></figure> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://picsum.photos/940/650?random=7"> <figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=7" alt="Random Image"></figure> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://picsum.photos/940/650?random=8"> <figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=8" alt="Random Image"></figure> </a> </div> </div> </section> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.5/popper.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js'></script><script> $(document).ready(function() { $(".gallery").magnificPopup({ delegate: "a", type: "image", tLoading: "Loading image #%curr%...", mainClass: "mfp-img-mobile", gallery: { enabled: true, navigateByImgClick: true, preload: [0, 1] // Will preload 0 - before current, and 1 after the current image }, image: { tError: '<a href="%url%">The image #%curr%</a> could not be loaded.' } }); }); </script> </body> </html>
Code copied to clipboard!
