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
