I need help creating a gallery using Bootstrap that resembles the style shown in this example:
While everything is functional, I am facing an issue with aligning the pictures properly after adding a hover effect. I tried placing each picture in individual containers, but now they are not lining up correctly due to variations in orientation (horizontal vs vertical). Does anyone have a solution to this problem? Here is the code for my project:
https://codepen.io/emmlll/pen/zYPLWxr
.img-gallery {
overflow: hidden;
}
.img-gallery img {
transition: all 1.3s ease;
}
.img-gallery:hover img {
transform: scale(1.2);
}<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a7a61666167746555203b243b26">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98c9788978a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dece2fecdbfa3bea3bc">[email protected]</a>/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="event.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
</style>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Playfair+Display" />
<link rel="stylesheet" href="style.css">
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73121c0033415d405d42">[email protected]</a>/dist/aos.css" rel="stylesheet">
<script>
AOS.init();
</script>
</head>
<div class="col-xl-12" id="gallery">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
<div class="img-gallery">
<img src="https://media.istockphoto.com/photos/large-green-cactus-plant-in-a-yellow-ceramic-vase-picture-id118062993?s=612x612" class="w-100 shadow-1-strong rounded-3 " />
</div>
</div>
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
<div class="img-gallery ">
<img src="https://media.istockphoto.com/photos/cactus-plant-with-green-leaves-and-shovels-and-small-yellow-thorns-on-picture-id1012417960?s=612x612" class="w-100 shadow-1-strong rounded-3" />
</div>
</div>
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
<div class="img-gallery mb-4">
<img src="https://media.istockphoto.com/photos/large-green-cactus-plant-in-a-yellow-ceramic-vase-picture-id118062993?s=612x612" class="w-100 shadow-1-strong rounded-3" />
</div>
</div>
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
<div class="img-gallery">
<img src="https://media.istockphoto.com/photos/cactus-plant-with-green-leaves-and-shovels-and-small-yellow-thorns-on-picture-id1012417960?s=612x612" class="w-100 shadow-1-strong rounded-3" />
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0" style="display:flex">
<div class="img-gallery">
<img src="https://media.istockphoto.com/photos/large-green-cactus-plant-in-a-yellow-ceramic-vase-picture-id118062993?s=612x612" class="w-100 shadow-1-strong rounded-3 " />
</div>
</div>
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
<div class="img-gallery">
<img src="https://media.istockphoto.com/photos/cactus-plant-with-green-leaves-and-shovels-and-small-yellow-thorns-on-picture-id1012417960?s=612x612" class="w-100 shadow-1-strong rounded-3" />
</div>
</div>
</div>
</div>