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;
  /* 溢出隐藏 */
}