精美而实用的网站，关注web编程技术、网站运营、SEO推广，让您轻松愉快的学习

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

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

<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倍。

扩展阅读： jquery实现鼠标放到图片上图片等比例放大

在线Demo预览

Tags：CSS hover 放大 等比例