CSS Hover：缩小图像框+缩放图像

Question

我希望有一个人可以帮助我。 我想使用 Wordpress 为具有 hover 效果的图像制作动画。 如果将鼠标移到图像上，图像会放大，但图像框会同时缩小。

这是我想象的一个例子：

https://solene.qodeinteractive.com/ （如果您向下滚动到真实照片）

到目前为止，我已将图像放入 wordpress 并在自定义 css 中插入以下代码：

.elementor-5528 .elementor-element.elementor-element-e19f93f .elementor-image img:hover {
   width: 100%;
   height: auto;
   -webkit-transform: scale (1.3);
   transform: scale (1.2);
   -webkit-transition: all 0.7s ease;
   transition: all 0.7s ease;
}

但是，包含图像框的图像现在被放大了。 我还需要添加什么才能使图像框的大小不会随图像增加，而是减小？ 如果有人可以帮助我，我将不胜感激。

最好的问候， Julia

Answer 1

在 hover 上，我们裁剪父容器的大小，同时缩放子图像。 而已。

请在 codepen 上查看：

css

div {
  max-width: 300px;
  transition: all ease 0.5s;
  clip-path: inset(0 0 0 0);
}
img {
  display: block;
  width: 100%;
  transition: transform ease 0.5s;
}
div:hover {
  clip-path: inset(12px 12px 12px 12px);
}
div:hover img {
  transform: scale(1.05);
}

html：

<div>
  <img alt="image" src="https://solene.qodeinteractive.com/wp-content/uploads/2019/11/h1-port-feauture-img-2.jpg"/>
</div>