<a target="_blank" id="a"><img id="img" /></a>
 <script type="text/javascript">
  var imgSrc = new Date().getDate() +'.jpg';
  document.getElementById('img').src = imgSrc;
  document.getElementById('a').href = imgSrc ;
 </script>

#p1{ float:left;
      width:50px;
	  height:200px;
	  background-color:#000;
	  transition:width 1s;
	  }
#p2{ float:left;
      width:50px;
	  height:200px;
	  background-color:#F00;
	  transition:width 1s;
	  }
#p3{ float:left;
      width:50px;
	  height:200px;
	  background-color:#6F0;
	  transition:width 1s;
	  }
#p4{ float:left;
      width:50px;
	  height:200px;
	  background-color:#00F;
	  transition:width 1s;
	  }
#p1:hover{ width:400px}
#p2:hover{ width:400px}
#p3:hover{ width:400px}
#p4:hover{ width:400px}

#p5{ float:right;
      width:50px;
	  height:200px;
	  background-color:#000;
	  transition:width 1s;
	  }
#p6{ float:right;
      width:50px;
	  height:200px;
	  background-color:#F00;
	  transition:width 1s;
	  }
#p7{ float:right;
      width:50px;
	  height:200px;
	  background-color:#6F0;
	  transition:width 1s;

	  }
#p8{ float:right;
      width:50px;
	  height:200px;
	  background-color:#00F;
	  transition:width 1s;
	  }
#p5:hover{ width:400px}
#p6:hover{ width:400px}
#p7:hover{ width:400px}
#p8:hover{ width:400px}

<div style=" width:800px; height:200px;">
<div id="p1"></div>
<div id="p2"></div>
<div id="p3"></div>
<div id="p4"></div>

<div style="width:400px; height:200px; position: absolute; left:208px; background-color:#C00; z-index:-1"></div>
<div id="p5"></div>
<div id="p6"></div>
<div id="p7"></div>
<div id="p8"></div>
</div>