Bootstrap portfolio snipp example v04
Whole html/css code
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet"> <title>Bootstrap portfolio snipp</title> <style> .pp a { position: relative; top: 0; transition: top ease 0.3s; } .pp a:hover { top: -15px; } .card { border: 0; } </style> </head> <body> <div class="container"> <div class="row py-5"> <div class="col-md-8 col-lg-8 col-xl-8 col-xxl-8 mx-auto text-center"> <p class="fw-bold mb-3 small text-muted text-uppercase">Our Projects</p> <h2 class="display-5">Check out some of our awesome projects with creative ideas and great design.</h2> </div> </div> <!-- /.row --> <div class="row gallery imageGallery1" data-masonry='{"percentPosition": true }'> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card"> <div class="card-body pp"> <a href="https://image.freepik.com/free-psd/5x7in-card-mockup-envelope-with-tucked-olive-tree-branch_160403-188.jpg"><img src="https://image.freepik.com/free-psd/5x7in-card-mockup-envelope-with-tucked-olive-tree-branch_160403-188.jpg" class="img-fluid rounded"></a> <h6 class="mt-4 opacity-50 text-danger">STATIONARY</h6> <h5 class="mt-3">Ipsum Ultricies Cursus</h5> </div> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card"> <div class="card-body pp"> <a href="https://image.freepik.com/free-psd/desk-calendar-mockup_47987-2833.jpg"><img src="https://image.freepik.com/free-psd/desk-calendar-mockup_47987-2833.jpg" class="img-fluid rounded"></a> <h6 class="opacity-50 text-primary mt-4">NOTEBOOK</h6> <h5 class="mt-3">Magna Tristique Inceptos</h5> </div> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card"> <div class="card-body pp"> <a href="https://image.freepik.com/free-psd/5x7in-card-mockup-envelope-olive-tree-branch_160403-189.jpg"><img src="https://image.freepik.com/free-psd/5x7in-card-mockup-envelope-olive-tree-branch_160403-189.jpg" class="img-fluid rounded"></a> <h6 class="opacity-50 text-success mt-4">INVITATION</h6> <h5 class="mt-3">Mollis Ipsum Mattis</h5> </div> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card"> <div class="card-body pp"> <a href="https://image.freepik.com/free-psd/minimal-branding-mockup_160403-193.jpg"><img src="https://image.freepik.com/free-psd/minimal-branding-mockup_160403-193.jpg" class="img-fluid rounded"></a> <h6 class="opacity-50 text-success mt-4">INVITATION</h6> <h5 class="mt-3">Mollis Ipsum Mattis</h5> </div> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card"> <div class="card-body pp"> <a href="https://image.freepik.com/free-psd/simple-print-stationary-mockup_160403-195.jpg"><img src="https://image.freepik.com/free-psd/simple-print-stationary-mockup_160403-195.jpg" class="img-fluid rounded"></a> <h6 class="opacity-50 text-success mt-4">INVITATION</h6> <h5 class="mt-3">Mollis Ipsum Mattis</h5> </div> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card"> <div class="card-body pp"> <a href="https://image.freepik.com/free-psd/perspective-stationery-mockup_308775-23.jpg"><img src="https://image.freepik.com/free-psd/perspective-stationery-mockup_308775-23.jpg" class="img-fluid rounded"></a> <h6 class="opacity-50 text-success mt-4">INVITATION</h6> <h5 class="mt-3">Mollis Ipsum Mattis</h5> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js" ></script> <script> $('.imageGallery1 a').simpleLightbox(); </script> </body> </html>
jsfiddle example