Create Zoom Effect on Image

This time we will create a zoom effect of images (example: The picture above). The image will be enlarged if your cursor is above it. Now the trick is probably less common, but if your blog has a lot of pictures of course the trick is to try .... Want to know how to do ...

Okay without further ado get on with it:
1. Login to blogger
2. Select Design and click Edit HTML
3. Backup your template first
4. Click on expand widget templates
5. Find this code  ]]></b: skin>
6. If already can paste the code below the above code  ]]></b: skin>

/* Zoom Efek */

.thumbnail {
    position: relative;
}

.thumbnail:hover {
    cursor: pointer;
    font-size: 100%;
    text-decoration: none;
}

.thumbnail span img {
    background: #000000;
    border-radius: 2px 2px 2px 2px;
    display: none;
    height: auto;
    padding: 4px;
    text-decoration: none;
    width: 300%;
    z-index: 100;
}

.thumbnail:hover span img {
    top: auto;
    display: block;
    font-weight: normal;
    left: auto;
    position: absolute;
    right: auto;
    bottom: -65px;
}

7. Keep your template.
8. Well if you paste this code to post on your image.

<div align="center">
<a class="thumbnail" href="#thumb"><img src="Your Image URL.."/><span><img src="Your Image URL.."/></span></a>
</div>

Okay good luck!