纯CSS实现鼠标hover放到图片上图片等比例放大

主要利用CSS3的transform:scale()可以实现按比例放大或者缩小功能，CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。


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

纯CSS实现鼠标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倍。