纯css hover放大图片

记录自己在工作中遇到的一些比较有意义的，值得去记一记的知识。

这次主要做的是css的hover效果，在所有的效果里，选择了放大，这个也是设计的要求，就做了这个

其实这个要求来说，很简单，主要使用的是css3中的tranform效果里的scale().2D转换。

html 代码如下：

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低版本，满满的都是泪）