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>