Tutorial: Another way of creating jQuery Zoom Effect

This is another method for jQuery zoom effect that you can apply. Unlike the previous tutorial on zoom effect which is pretty simple and straight forward, this approach tend to be more complex. The previous method mention has a pretty bad setback which the zoom doesn't focus on the center of the picture. Instead, it tries to push the picture towards the top left hand corner as the previous method push the opposite direction while the animate function slide up and sideward in order to simulate a center zoom which doesn't really work on ALL function. Therefore, i think there is  a need to create another tutorial just to solve this issue and bring you another way of solving the previous zoom effect problem.


The concept here to simulate a zoom effect is different from the previous simple method of just using animate function available in jQuery. This concept will basically use 4 card board each at the different side of the picture and pull in and out together to simulate this zoom function in jQuery.


The HTML part of the code is a pretty simple way of placing the images onto a div box for good manipulation.