CSS图片放大hover效果,过度效果

 

<div class="wen"><!-- 调用wen样式 -->
	<div class="zz"><!-- 调用zz样式 -->
	<img src="img/10012.jpg" width="300px" height="200px"><!-- 添加图片 -->
	 </div><!-- 结束语 -->
</div><!-- 结束语 -->

.wen{
	width: 300px;
	/* 宽：300px */
	height: 200px;
	/* 高：200px */
	overflow: hidden;
	/* 溢出：隐藏 */
}
.zz{
	width: 300px;
	/* 宽:300px */
	height: 200px;
	/* 高:200px */
	overflow: hidden;
	/* 溢出：隐藏 */
}
.zz img{
	cursor: pointer;
	/* 手指指针 */
	transition: all 0.5s;
	/* 浮动；所有属性，0.5秒 */
	overflow: hidden;
	/* 溢出隐藏 */
}
.zz img:hover{
	transform: scale(1.1);
	/* 变形：缩放，放大比例(1.1) */
	overflow: hidden;
	/* 溢出隐藏 */
}