The HTML

Quick and easy, the general framework we’ll be using goes as follows:

<div id="menuwrapper">
 <div id="menu">
  <a href="#" class="menuitem"><img src="image.jpg"></a><!--Template for each menu item-->
 </div>
</div>

The CSS

Normally when a div tag has to expand to accommodate more content, it does so downwards, adding height onto the bottom of the element rather than the top. For this menu we will want to do the exact opposite – when the user hovers over the thumbnail it should expand upward (think about how the OSX dock works).

We’re going to go about this by making use of position:fixed, which essentially lets us “fix” elements to the bottom. Let’s break down the elements.

/* The container which the menu is "locked" to the bottom of */
#menuwrapper{ position:relative; height:210px; }

/* Fixes the whole menu to the bottom of the parent div */
#menu{position:absolute; bottom:0;}

/* Each individual menu item fixed to the bottom with display:inline-block to create elasticity */
.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

The jQuery

The jQuery in my example serves two purposes:

1. Resize images to smaller sizes when page first loads.
2. Animate images to larger size when hovered over.

Here’s the snippet that makes this all happen (With inline comments for explanations):

$(document).ready(function(){
 $('.menuitem img').animate({width: 100}, 0); //Set all menu items to smaller size

 $('.menuitem').mouseover(function(){ //When mouse over menu item

  gridimage = $(this).find('img'); //Define target as a variable
  gridimage.stop().animate({width: 200}, 150); //Animate image expanding to original size

 }).mouseout(function(){ //When mouse no longer over menu item

  gridimage.stop().animate({width: 100}, 150); //Animate image back to smaller size

 });
});