CSS 鼠标悬停时放大图片

Question

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

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

P.S。我正在使用 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>

CSS 鼠标悬停时放大图片

CSS Image zoom in on hover

html

css

transition

hover