CSS 图像在悬停时放大

Question

我设法为悬停时的图像创建了放大效果。 然而，问题是当鼠标悬停时图像移动到右下角。 我想放大到中心中心。 怎么可能？

我曾尝试使用transform scale(1.1); 它适用于放大到中心中心，但过渡效果不起作用。 所以图像只是在鼠标悬停时跳转到 1.1 并且效果不再平滑。

PS 我正在使用 Joomla 和 SP Page Builder

.sppb-col-md-3
{
  overflow: hidden; 
}
.hover03
{
  height: 100%;
  width: 100%;

          transition: all 1s ease;
}
.hover03:hover
{
  width: 110%;
  height: 110%;
}

Answer 1

您应该将过渡应用于元素，在您的案例中使用 img 标签，以及 :hover 上的效果（即变换：缩放；）。 希望有帮助！

看看这个工作示例：

https://codepen.io/Angel-SG/pen/JwJzxg

 .img-outer { overflow: hidden; max-width: 300px; max-height: 300px; } .img-inner { position: relative; } img { transition: 0.5s ease; } img:hover { transform: scale(1.2); }

 <div class="img-outer"> <div class="img-inner"> <img src="https://via.placeholder.com/300C/O https://placeholder.com/" alt="image"> </div> </div>