Blog: Add image enlarge hover capability to blog.

I opened a thread on ee for this and was give some suggestions:

http://www.experts-exchange.com/Web_Development/Blogs/Q_27227996.html

I tried implementing the example in the first link. I added the following code 
to the blog layout:
(Go to Design->Edit Html and check "Expand Widget Templates")

/* Custom image code */

#picture {width:100px; height: 250px; background-color:#ffffff;}
#picture a.small, #picture a.small:visited { display:block; width:100px; 
height:100px; text-decoration:none; background:#ffffff; top:0; left:0; 
border:0;}
#picture a img {border:0;}
#picture a.small:hover {text-decoration:none; background-color:#000000; 
color:#000000;}
#picture a .large {display:block; position:absolute; width:0; height:0; 
border:0; top:0; left:0;}
#picture a.small:hover .large {display:block; position:absolute; top: 90px; 
left:150px; width:700px; height:500px; z-index:9999; }

/* End custom image */

Here's the code that I put into the actual blog post:

<div id="picture">
<a class="small" 
href="http://2.bp.blogspot.com/-ZJcU39ZQp2c/TjMhhy1ZHqI/AAAAAAAADtY/Y9B8gSf-dI4/
s1600/fireshot-7-29.png" onblur="try {parent.deselectBloggerImageGracefully();} 
catch(e) {}"><img style="display:block; margin:20px auto 10px; 
text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 264px;" 
src="http://2.bp.blogspot.com/-ZJcU39ZQp2c/TjMhhy1ZHqI/AAAAAAAADtY/Y9B8gSf-dI4/s
400/fireshot-7-29.png" border="0" alt="" 
id="BLOGGER_PHOTO_ID_5634884423235739298" />
<img class="large" 
src="http://2.bp.blogspot.com/-ZJcU39ZQp2c/TjMhhy1ZHqI/AAAAAAAADtY/Y9B8gSf-dI4/s
1600/fireshot-7-29.png" title="large image" />
</a>
</div>

A couple of issues with this method:
1) (minor) both the larger and smaller image appear when previewing the post in 
blogger - this may actually be considered a good thing.
2) The formatting of the smaller image is messed up - it isn't center and 
sometimes interferes with the following text.
3) the z-index property doesn't work in ie.
4) From playing around with this, it appears that a lot of manually work will 
have to be done for each method to get the proportions and spacing right.
Original issue reported on code.google.com by hastapas...@gmail.com on 29 Jul 2011 at 10:05
hastapasta / financereport

Blog: Add image enlarge hover capability to blog. #348
