Bootstrap portfolio snipp example v01
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="bootstrap.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; } </style> </head> <body> <div class="container"> <div class="row py-5"> <div class="col-md-8 col-lg-8 col-xl-7 col-xxl-6"> <h2 class="display-5 mb-3">Recent Projects</h2> <p class="lead">We love to turn ideas into beautiful things.</p> </div> </div> <div class="row gx-5"> <div class="col-md-6 align-self-start"> <div class="mb-5 pp"> <a href=""><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 class="pp"> <a href=""><img src="https://image.freepik.com/free-psd/landscape-book-album-mockup_165789-343.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 class="col-md-6 align-self-center pp"> <div class="ms-lg-5"> <a href=""><img src="https://image.freepik.com/free-psd/letterhead-business-card-layout-mockup_160403-191.jpg" class="img-fluid rounded w-100"></a> <h6 class="opacity-50 text-success mt-4">INVITATION</h6> <h5 class="mt-3">Mollis Ipsum Mattis</h5> </div> </div> </div> </div> </body> </html>
jsfiddle example