css3为图片添加鼠标移入放大效果

最新推荐文章于 2024-03-04 08:00:00 发布

转载最新推荐文章于 2024-03-04 08:00:00 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/486530

本文介绍了一种使用CSS伪类实现的图片悬停放大效果。通过定义:hover状态下的transform属性，可以使图片在鼠标悬停时平滑地放大15%。支持Webkit和Moz两种浏览器引擎，过渡效果流畅。

只需要为添加效果的图片定义一个伪类

img.zoom-img:hover {
    -webkit-transform: scale(1.15);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 20000ms;
    -moz-transform: scale(1.15);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 750ms;
    overflow: hidden;
}