Career Changes…

Due to changes in my professional career, I am no longer able to provide Freelance services. I would like to thank all my clients and partners in these past few years. It was a pleasure working with you all! The website will still be available, so please feel free to browse around. Sincerely, Raphael

Top ↑

New project added to Portfolio

My newest project, Little Isabella has gone live. The site features a blog and photo galleries for family and friends. Site is for members only and can be previewed at my Portfolio page or visited at www.little-isabella.com

Top ↑

How to Create a Elastic Thumbnail Menu with CSS and jQuery

I was going around the web looking for some interesting tutorials and found this one I would like to share. This is an elastic thumbnail menu which combines HTML, CSS and jQuery to create a cool zoom effect and expand upwards when an image is hovered over.

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

Top ↑