【问题标题】:CSS Image zoom in on hoverCSS图像在悬停时放大
【发布时间】:2019-05-24 16:52:16
【问题描述】:

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

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

附:我正在使用 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%;
}

【问题讨论】:

  • 你能举个例子说明秤不工作,因为它应该工作
  • 再次使用变换但添加transform-origin:center
  • 大卫的建议奏效了!谢谢!
  • 多年来没有浏览器需要前缀来进行过渡。

标签: html css hover transition


【解决方案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>

【讨论】:

  • 随着链接失效,您的链接将变得无用。请在此处发布您的示例标记,不要使用第三方网站。
  • 好吧,从技术上讲,理想情况下,示例代码应该作为 sn-p 添加到帖子中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-03-13
  • 2015-01-28
  • 1970-01-01
  • 2016-02-03
  • 2013-09-07
  • 2018-09-15
  • 2013-11-27
相关资源
最近更新 更多