Another Magnifying Menu using CSS and HTML

SEE THE LIVE DEMO

Similar to the fisheye menu, this magnifying menu doesn't use javascript and only magnifies the image selected. The images are held as foreground images and have associated text (out of site) for text readers. The styling for this is very simple and the enlargement can be set to any value you please (so long as it does not completely cover adjacent images so that they cannot be selected.) This one gives a x2 enlargement which is probably the maximum value it should be set to for compatibility reasons. 

Steps for this tutorial:

1. Log into your Blogger dashboard and navigate to Design > Edit HTML.

2. Insert the following CSS code into your head section.

<style type='text/css'> #info {height:400px;} #enlarge {padding:0; margin:4em auto; list-style-type:none; width:480px; height:40px;} #enlarge li {display:block; float:left; width:40px; height:40px; position:relative;} #enlarge li a {display:block; width:40px; height:40px; background:transparent; overflow:hidden; position:relative;} #enlarge li a img {width:100%; height:100%; border:0;} #enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;} </style>

3. Next, add a new HTML/JavaScript gadget under Page Elements and add the following HTML code.

<ul id="enlarge"> <li><a href="#one"><img src="http://blogspotvision.com/icons/panda-social-icons/blogger.png" alt="image 1" title="Blogger" />Blogger</a></li> <li><a href="#two"><img src="http://blogspotvision.com/icons/panda-social-icons/delicious.png" alt="image 2" title="Delicious" />Delicious</a></li> <li><a href="#three"><img src="http://blogspotvision.com/icons/panda-social-icons/digg.png" alt="image 3" title="Digg" />Digg</a></li> <li><a href="#four"><img src="http://blogspotvision.com/icons/panda-social-icons/facebook.png" alt="image 4" title="Facebook" />Facebook</a></li> <li><a href="#five"><img src="http://blogspotvision.com/icons/panda-social-icons/flickr.png" alt="image 5" title="Flickr" />Flickr</a></li> <li><a href="#six"><img src="http://blogspotvision.com/icons/panda-social-icons/reddit.png" alt="image 6" title="Reddit" />Reddit</a></li> <li><a href="#one"><img src="http://blogspotvision.com/icons/panda-social-icons/rss.png" alt="image 1" title="RSS" />RSS</a></li> <li><a href="#two"><img src="http://blogspotvision.com/icons/panda-social-icons/stumble_upon.png" alt="image 2" title="Stumble Upon" />Stumble Upon</a></li> <li><a href="#three"><img src="http://blogspotvision.com/icons/panda-social-icons/technorati.png" alt="image 3" title="technorati" />technorati</a></li> <li><a href="#four"><img src="http://blogspotvision.com/icons/panda-social-icons/twitter.png" alt="image 4" title="Twitter" />Twitter</a></li> <li><a href="#five"><img src="http://blogspotvision.com/icons/panda-social-icons/vimeo.png" alt="image 5" title="vimeo" />vimeo</a></li> <li><a href="#six"><img src="http://blogspotvision.com/icons/panda-social-icons/yahoo.png" alt="image 6" title="Yahoo!" />Yahoo!</a></li> </ul>

Note: Change link and images. Each image will appear to the right of the the previous one.