html 悬停时的图像缩放效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 悬停时的图像缩放效果相关的知识,希望对你有一定的参考价值。

.mg-image img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
max-width: 100%;
}

.mg-image:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
<div class="mg-image">
  <img src="image1.jpg">
</div>

以上是关于html 悬停时的图像缩放效果的主要内容,如果未能解决你的问题,请参考以下文章

css 图像div悬停缩放效果

由于悬停时的转换/缩放,在移动设备上难以滚动

使用 CSS 变换在悬停时缩放 SVG 矩形

html 图像悬停时的黑色透明度

UIView 图像中的缩放效果

Firefox中带有缩放变换的CSS过渡效果后的图像移动/跳跃