将放大效果添加到引导图库
我想用bootstrap制作一个如下所示的图库： https://mdbootstrap.com/docs/standard/extended/gallery/
一切都正常，但我想给这些图片添加一个悬停效果，所以我把它们都放在不同的容器里，这很管用，但现在图片不再对齐了，因为一些是水平的，另一些是垂直的：/ 有没有人有办法解决这个问题？ 以下是我的项目代码：
https://codepen.io/emmlll/pen/zYPLWxr
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">.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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://unpkg.com/aos@2.3.1/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/aos@2.3.1/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>解决方案
对于Bootstrap库，您应该将每列的所有图像嵌套在同一列中。每个图像都有一个新的列，这就是将其隔开的地方。如果您检查链接中的示例，您会注意到它的结构是这样的。然后只需将每个图像嵌套在具有悬停效果的img-gallery中。
见下图：
编辑~我不确定您是否想要所列示例中的砖石类型布局。如果这样做，只需将mb-4添加为图像上的类。
.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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://unpkg.com/aos@2.3.1/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/aos@2.3.1/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 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 ">
<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 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 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 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>相关文章