html - 使用 CSS 在悬停时放大图像但保持图像大小。我让它工作，但它只显示图像的一个 Angular

Question

我在网页顶部附近有一张图片。我已经做到了，当我将鼠标悬停在图像上时，它会稍微放大。但是，在这样做的过程中，我弄乱了一些东西，导致图像只显示一个部分，无论悬停是否被激活。我试过删除我添加的部分代码，但如果不完全删除悬停动画似乎无法修复它。我也试过改变边距、填充和位置。如果有所不同，我正在使用 Bootstrap 4。我敢肯定这很简单，我只是想不出需要更改什么。

这是 Codepen 的链接:https://codepen.io/amandathedev/pen/zyEyze

这是 CSS 的相关部分:

.imgBox {
float: left;
position: relative;
width: 640px;
height: 360px;
margin: 0 auto;
/* justify-content: center;
display: inline-block; */
overflow: hidden;
}

.imgCard {
    position: absolute;
    top: 0;
    left: 0;
}

.imgCard img {
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}

.imgBox:hover .imgCard img {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}

Answer 1

您需要将 transform-origin 设置为 center 以便它从中心开始缩放，因此您的 css 必须如下所示:

..其他CSS

.imgBox:hover .imgCard img {
    transform: scale(1.05);
    transform-origin: center;
    -webkit-transform: scale(1.05);
}