Elastic Thumbnail menu - css not making bottom of images stick
<p>I found a quick and easy animation technique to add to my thumbnail gallery, the technique is here <a href="http://buildinternet.com/2009/09/sproing-make-an-elastic-thumbnail-menu/" rel="nofollow">http://buildinternet.com/2009/09/sproing-make-an-elastic-thumbnail-menu/</a>  </p>

<p>I have implemented with no issue however for me, the css doesn't appear to ensure the images stick on the same level like they should in the given demo example.</p>

<p>This means when I hover on an image and it enlarges, all the others move around too. I want it to work like the demo which is more of an 'apple-dock' type animation. please see code below: </p>

<p>and <strong><a href="http://jsfiddle.net/7PRwA/2/" rel="nofollow">JSFIDDLE DEMO</a></strong> </p>

<p>JS</p>

<pre><code>&lt;script type="text/javascript"&gt;
   $(document).ready(function(){
     $('.menuitem img').animate({width: 155}, 0);
     $('.menuitem').mouseover(function(){
       gridimage = $(this).find('img');
       gridimage.stop().animate({width: 200}, 500);
     }).mouseout(function(){
       gridimage.stop().animate({width: 155}, 300);
     });
  }); 
&lt;/script&gt;
</code></pre>

<p>CSS</p>

<pre><code>#menuwrapper{ 
   position:relative;
   height:210px;  
}  
#menu{
  position:absolute;
  bottombottom:0;
}  
.menuitem{ 
  position:fixed relative;
  bottom:0px; 
  display:inline-block; 
}  
img { 
  -ms-interpolation-mode: bicubic; 
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;div id="menuwrapper"&gt;  
&lt;div id="menu"&gt;  
  &lt;a href="/interactive/cis/PaycoCISBrochure.html" class="menuitem"&gt;
    &lt;img   class="interactive_img" src="/images/Payco-CIS-interactive.png"&gt;
  &lt;/a&gt;&lt;!--Template for each menu item--&gt;  
  &lt;a href="/interactive/PU/PaycoUmbrellaBrochure.html" class="menuitem"&gt;
    &lt;img class="interactive_img" src="/images/Payco-Umbrella-interactive.png"&gt;
  &lt;/a&gt;
  &lt;a href="/interactive/tech/PaycoTechBrochure.html" class="menuitem"&gt;
    &lt;img class="interactive_img" src="/images/Payco-Tech-interactive.png"&gt;
  &lt;/a&gt;
  &lt;a href="/interactive/media/PaycoMediaBrochure.html" class="menuitem"&gt;
    &lt;img class="interactive_img" src="/images/Payco-Media-interactive.png"&gt;
  &lt;/a&gt;
  &lt;a href="/interactive/medical/PaycoMedicalBrochure.html" class="menuitem"&gt;
    &lt;img class="interactive_img" src="/images/Payco-Medical-interactive.png"&gt;
  &lt;/a&gt;
  &lt;a href="/interactive/logistics/PaycoLogisticsBrochure.html" class="menuitem"&gt;
    &lt;img class="interactive_img" src="/images/Payco-Logistics-interactive.png"&gt;
  &lt;/a&gt;
  &lt;a href="/interactive/SU/SimplyUmbrellaBrochure.html" class="menuitem"&gt;
    &lt;img class="interactive_img" src="/images/Simply-Umbrella-interactive.png"&gt;
  &lt;/a&gt;
&lt;/div&gt;  
&lt;/div&gt;  
</code></pre>
