Mouseover Mouseout鼠标移入图片显示大图！

未经优化的代码（能实现）：
CSS代码：

.main{
   margin-top: 20px; 
   margin-left: 500px; 
   height:100px;
   width:500px;
   position: relative;
}
  #box{
  	position: absolute;
  	top:20px;
  	left: 20px;
  	height: 100px;
  	width: 100px;
  }
  #img1{
  	position: absolute;
  	left: 0;
  	top:0;
  }
  #img2{
  	position: absolute;
  	left: 150px;
  	top: 0;
  }
  #img3{
    position: absolute;
    left:300px;
    top:0;
  }
</style>
   //容器
<div class="main">     
<img id="img1" src="img/f2.jpg" width="100px"
 height="100px" alt="">
 <img id="img2" src="img/f3.jpg" width="100px" height="100