html - Keep relative positioned images at the bottom when size of one changes -

i have images in div, grow bigger when move mose on them. problem is, if 1 of them gets bigger, other images stay @ top of div , move up.

i tried setting bottom property of images 0, doesnt work because positioned relative. if set position absolute , bring them right position, overlap when grow bigger.

i tried set vertical-align of parent div bottom doesn't work either.

my html:

<div id="picmen">     <img src="/images/b1.png" />     <img src="/images/b2.png" />     <img src="/images/b3.png" />     <img src="/images/b4.png" />     <img src="/images/b5.png" />     <img src="/images/b6.png" />     <img src="/images/b7.png" /> </div> 

my css:

#picmen {     position: absolute;     right: 0px;     bottom: 0px;     vertical-align: bottom; }  #picmen img {     float: right;     margin: 3px 1px 3px 1px;     height: 50px;     width: 50px;     transition-duration: 0.5s; }  #picmen img:hover {     transition-duration: 0.5s;      width: 60px;     height: 60px; } 

i think have play #picmen height

#picmen { position: absolute; right: 0px; bottom: 0px; vertical-align: bottom; height:63px} 

on other hand non-mouseover img should have top value

#picmen img { position:relative; float: right; margin: 3px 1px 3px 1px; height: 50px; width: 50px; transition-duration: 0.5s; top:6px} 

there example jsfiddle , replaced img buttons, should same