图片hover之后等比例放大,鼠标移开又等比例恢复原状,同时带有动画过渡效果
<!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之后的效果图: