make a popup window for showing full image in Blogspot

in blog ,sometime you have to resize image for displaying in blog .But what happen if your reader want to see full picture of your image instead of thumbnal or resized ones ? To show full image in post ,you can make a pop-up window ,when reader move mouse's cursor over the picture , a pop-up with full image will be appeared . In Fandung blog ,I found this code . Thanks Fandung for this tip .
Live demo here

To do this ,follow some simple steps bellow :
login to your blogspot account . Go to Layout ,edit HTML ,add this code bellow after </head>

<style type='text/css'>

.img-thumbnail{
position: relative;
z-index: 0;
}

.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.img-thumbnail span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.img-thumbnail span img{
border-width: 0;
padding: 2px;
}

.img-thumbnail:hover span{
visibility: visible;
top: -100px;
left:100px; /*position where enlarged image should offset horizontally */
}

</style>

two red line in the code above is the position of your pop-up . You can change this for your blog .

Add this code for each image you want to add pop-up window . The img tag with height and width attribute is used for thumbnail ,the followed img tag is which showed in pop-up window .

<a class="img-thumbnail" href="#">
<img src="url for image 1" border="0" height="98" width="130"/>
<span>
<img src="url for image 1"/>
</span>
</a>

check this tip for now and give me comment if you meet any error .
Thanks Fandung again for this tip .