Add a fun polaroid sidebar menu

This is fun menu that makes your images look like polaroid pictures and does a cool zoom effect when you hover over it:

This is done completely in CSS with no extra scripts added! Thanks to zurb.com for the code. This has been modified to copy & paste into TypePad.

1. Upload your images

The menu uses three images. Upload the images you would like to use to your File Manager. We sized our images to 100px so it only needs to load a small file size.

2. Add the HTML to your sidebar

In Design > Content, under Modules, select "Embed your own HTML" to add this new HTML module. Here you will enter the code for the menu:

Each of the three items in the menu has a list item:

<a href="http://www.example.com" title="My Family">
<img src="http://themes.typepad.com/images/polaroid-myfamily.jpg" />
</a>

The green URL is where you put the link for the page to go to when the image is clicked. The red title is the title that will appear under the picture. And the blue is the location of the image in the file manager.

3. Add the CSS

First, we'll want to make sure we have enough room in our sidebar. Here we are using the Two-Column-Right layout so we'll add this to our Custom CSS to change the column widths:

And then we'll add the CSS to make it fancy, in our Custom CSS area:

ul.polaroids-menu { 
	width: 280px; 
	margin: 30px 0 18px -55px;
	list-style-type: none;
	}

ul.polaroids-menu a, ul.polaroids-menu a:hover { 
	display: inline;
	float: left; 
	width: auto;
	margin: 0 0 27px 30px; 
	padding: 6px 6px 3px; 
	background: #fff; 
	font-family: "Marker Felt", sans-serif; 
	text-align: center; 
	text-decoration: none; 
	color: #333; 
	font-size: 14px; 
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
	/* default/first image rotation */
	-webkit-transform: rotate(-2deg); 
	-moz-transform: rotate(-2deg); 
	-webkit-transition: -webkit-transform .15s linear; 
	}

ul.polaroids-menu img { 
	display: block; 
	width: 80px; 
	margin-bottom: 6px; 
	border-radius: 0; 
	border: 0;
	}

ul.polaroids-menu a:after { content: attr(title); }

/* #2 About Me */		
ul.polaroids-menu li:nth-child(2n) a { 
	-webkit-transform: rotate(6deg);  
	-moz-transform: rotate(6deg); 
	margin-left: -8px;
	margin-top: 20px;
	}

/* #3 My Shop */
ul.polaroids-menu li:nth-child(3n) a { 
	-webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); 
	margin-top: -175px; 
	margin-left: 185px; 
	}

/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */		
ul.polaroids-menu li a:hover { 
	-webkit-transform: scale(1.25); 
	-moz-transform: scale(1.25); 
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
	position: relative; 
	z-index: 5; 
	}

That's it! Enjoy!

Additional links to learn more

css-tricks.com: How nth-child Works

CSS Cookbook