The HTML Code (plain and simple):

<div id="menuwrapper">
	<div id="menu">
		<a href="#" class="menuitem"><img src="image.jpg"/></a>
	</div>
</div>

The CSS Code:

This menu will be a bit different from conventional menus and the when the user hovers over the thumbnail, the image will expand to the right and upwards.

The main piece to acheive this effect is position:fixed;, which keeps the thumbnails aligned to the bottom.

#menuwrapper{ position:relative; height:210px; }

#menu{position:absolute; bottom:0;}

.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

img { -ms-interpolation-mode: bicubic; }

Note that for this effect to work in Internet Explorer, we need to add img { -ms-interpolation-mode: bicubic; } to our CSS file.

The jQuery Code:

$(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

	});
});

See the demo here

Source: build internet