Increment img for mag

by Symphony

HTML

<div class="prod">
    <img data-src="http://prophotos.ru/data/articles/0001/4308/56636/hp-photosmart-premium-with-touchsmart-web-20-original.jpg" src="http://i.mailfotomag.net/tgx/8/f4/179ba476560b0eacf2669c5de99ac.jpg" alt="1" class="small" />
</div>

CSS

.prod {
    position: relative;
    margin: 20px;
    width: 330px;
}
.small {
    width: 300px;
    display: block;
}
.large {
    position: absolute;
    width: 400px;
    height: 340px;
    overflow: scroll;
    top: 0;
    left: 330px;
    border: 1px solid #ccc;
}

JavaScript

$(function(){
    $('.prod').hover(function(){
        var srcImg = $(this).children('.small').data('src');
        $(this).append('<div class="large"><img src="'+srcImg+'" alt="2" /></div>');
    },function(){
        $('.large').remove();
    });
});