css实现鼠标移入图片放大的动画过渡效果

放大的过程是有动画过渡的，过渡的时间可以自定义。
CSS3的transform:scale( )可以实现按比例放大或者缩小的效果。
代码如下：
HTML：

<a class="newsList_pic" href="news-details.html">
	<img class="" src="img/proList-1.png" alt="" />
</a>

CSS：

.newsList_pic{
	display: block;
	width: 100%;
	height: 240px;
	overflow: hidden;
	text-align: center;
}
.newsList_pic img{
	width: auto;
	max-height: 100%;
	transition: all 0.3s;
}
.newsList_pic img:hover{
	transform: scale(1.1);
}

其中：
transition: all 0.3s;——>表示所有的属性变化在0.3s的时间段内完成（设置动画的执行时间，即图片放大到1.1倍所需的时间）
transform: scale(1.1);——>设置图片按比例放大的倍数，我设置的是1.1倍，可以自定义设置

效果如下图所示：

• 鼠标未移入图片上的效果：
  
• 鼠标移入图片上的效果：
  
  如有错误请各位大神评论指教……