纯css hover放大图片

原创于 2017-08-18 15:55:22 发布 · 1.7w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html #图片 #2d

css3 同时被 3 个专栏收录

3 篇文章

订阅专栏

transform

2 篇文章

订阅专栏

2D转换

1 篇文章

订阅专栏

本文介绍如何使用CSS3的transform属性实现图片hover放大效果。通过设置transition属性使图片平滑过渡，兼容主流浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录自己在工作中遇到的一些比较有意义的，值得去记一记的知识。
这次主要做的是css的hover效果，在所有的效果里，选择了放大，这个也是设计的要求，就做了这个
其实这个要求来说，很简单，主要使用的是css3中的tranform效果里的scale().2D转换。

html 代码如下：

<div> <img src="1.jpg" /> </div>

hover效果css代码:

div {
    width: 555px;
    height: 489px;
    border: #000 solid 1px;
    margin: 50px auto;
    overflow: hidden;
}
div img {
    cursor: pointer;
    transition: all 0.6s;
}
div img:hover {
    transform: scale(1.4);
}

属性解释

transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍

不过这个transform 的属性只支持到ie9，如果是ie9一下的小伙伴，使用这个，就没有效果了（我很讨厌ie低版本，满满的都是泪）