在CSS上覆盖图片hover,过度效果

样式代码
.design{
  width: 200px;
  height: 250px;
  overflow: hidden;
  float: left;
  cursor: pointer;
  margin-left: 50px;
}
.yewu{
  width: 200px;
  height: 280px;
  background-image:url(../img/123.png);
  display: none;
  background-repeat: no-repeat;
}
.design:hover .yewu{
  display: block;
}

代码部分参考
<div class="design">
  <div class="yewu"></div>
  <img src="img/10004.png">
</div>