[英]CSS Image zoom in on hover
我設法為懸停時的圖像創建了放大效果。 然而,問題是當鼠標懸停時圖像移動到右下角。 我想放大到中心中心。 怎么可能?
我曾嘗試使用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%;
}
您應該將過渡應用於元素,在您的案例中使用 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.