CSS设置鼠标放在图片上hover的时候会按比例放大的效果

图片hover之后等比例放大，鼠标移开又等比例恢复原状，同时带有动画过渡效果

  • 使用CSS3中的transform属性；
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>hover放大效果</title>  
        <style type="text/css">  
            div{  
                width: 900px;  
                height: 600px;  
                border: 1px solid #000;  
                margin: 50px auto;  
                overflow: hidden;  
                border-radius: 5px;
            }  
            div img{  
                cursor: pointer;  
                transition: all 0.5s; /* 所有的属性变化在0.5s的时间段内完成 */
            }  
            div img:hover{  
                transform: scale(1.5); /* 鼠标放到图片上的时候图片按比例放大1.5倍   */
            }  
        </style>  
    </head>  
    <body>  
        <div>  
            ![](http://upload-images.jianshu.io/upload_images/5726812-7104c88274015ff1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)  
        </div>  
    </body>  
</html>

放大前的效果图：

鼠标hover之后的效果图：

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容