[jQuery] Hover Zoom Effect: Vertical & Horizontal

<!--
    Everything in here is required for the effect to work.
    This is the source code for both the effects.

    author Gecko @RSTForums.com
-->

<!-- Stylesheet -->
<style>
.container {
    overflow: hidden;
    width: 400px; /* Container width */
    height: 400px; /* Container height */
}
.container img {
    position: relative;
}
</style>

<!-- Markup -->
<div class="container">
    <img src="http://www.g3x0.com/rst/images/mago-huge.jpg" />
</div>

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Hover Zoom Effect -->
<script>
$(function() {
    var container = $(".container");

    container.mousemove(function(e) {
        var parentOffset = $(this).offset();
        var x = e.pageX - parentOffset.left;
        var y = e.pageY - parentOffset.top;
        var image = $(this).find('img');

        // Vertical
        if (image.height() > $(this).height())
            image.css({ top: - y / $(this).height() * image.height() + y + 'px' });

        // Horizontal
        if (image.width() > $(this).width())
            image.css({ left: - x / $(this).width() * image.width() + x + 'px' });
    });
});
</script>