HTML5 изменяет размеры div вправо, а не влево

Когда я наводил указатель мыши на первое изображение, он расширяется, а другие divs уменьшаются, когда вы делаете это с любым другим div, чем первый, он только изменяет divs справа, а не влево.

Вы можете найти мой код до сих пор и посмотреть, как он работает до сих пор.

<div id="slider">

<div id="allpic1">
 <img src="http://www.coolusbtoys.com/wp-content/Angry-Birds-space-Calendar-2013.jpg"/>
</div>
<div id="allpic2">
  <img src="http://i4.ytimg.com/sh/G2lfbxaIEy4/showposter.jpg?v=4fbb28d7"/>
</div>
<div id="allpic3">
  <img src="http://ec2.images-amazon.com/images/I/41hmD1hLmBL._SL500_AA300_.jpg"/>
</div>
<div id="allpic4">
  <img src="http://1.bp.blogspot.com/-55F_zXg6TKI/UKB6cCTZ1XI/AAAAAAAAB3c/um9nqYtzfY4/s1600/61bEcpAzU0L._SL500_AA300_.jpg"/>
</div>

CSS

проверьте ссылку ниже

http://jsfiddle.net/dBGeV/