zoom in image

jsdoit.css

#jquery-ui-transfer {
    position:absolute;
    top:0px; left:0px;
    width: 300px;
    height: 400px;
    background: url("http://jsrun.it/assets/x/6/D/V/x6DVX.jpg");
    background-size:300px 400px;
    background-repeat:no-repeat;
}
.ui-effects-transfer {
    border: 1px dotted red;
    background: url("http://jsrun.it/assets/x/6/D/V/x6DVX.jpg");
    background-size: 100% 100%;
}

.before
{
    position:absolute;
    top:0px; left:0px;
    width: 75px;
    height: 100px;
    background: url("http://jsrun.it/assets/x/6/D/V/x6DVX.jpg");
    background-size:75px 100px;
    background-repeat:no-repeat;
}

jsdoit.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<div>
 <div class="before" id="jquery-ui-effect-1">
</div>

<div style="clear: both;"></div>
<div id="jquery-ui-transfer" class="ui-effects-transfer" hidden="true">
</div>   
</div>

jsdoit.js

$(function () {
    $('#jquery-ui-effect-1').click(function () {
        $(this).effect('transfer', {
            to: '#jquery-ui-transfer',
            className: 'ui-effects-transfer'
        }, 1000, function() {
            $('#jquery-ui-transfer').show();
            $(this).hide();
        });
    });
    $('#jquery-ui-transfer').click(function() {
        $(this).hide();
        $('#jquery-ui-effect-1').show();
    });
});