[英]CSS Image zoom in on hover
I have managed to create a zoom in effect for image on hover.我设法为悬停时的图像创建了放大效果。 However the problem is that image is moving to the right bottom corner while mouse is over.然而,问题是当鼠标悬停时图像移动到右下角。 I would like to zoom in to the center-center.我想放大到中心中心。 How it possible?怎么可能?
I have tried to use transform scale(1.1);
我曾尝试使用transform scale(1.1);
and it works for zooming in to the center-center but then transition effect doesn't work.它适用于放大到中心中心,但过渡效果不起作用。 So image is just jumps to 1.1 on mouse over and effect is not smooth anymore.所以图像只是在鼠标悬停时跳转到 1.1 并且效果不再平滑。
PS I am using Joomla and SP Page Builder 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%;
}
You should apply the transition to the element, img tag in your case, and the effect (ie transform: scale;) on :hover.您应该将过渡应用于元素,在您的案例中使用 img 标签,以及 :hover 上的效果(即变换:缩放;)。 Hope that helps!希望有帮助!
Have a look at this working example:看看这个工作示例:
https://codepen.io/Angel-SG/pen/JwJzxg 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.