Полноразмерная картинка при наведении

 Для создания полноразмерного изображения при наведении на картинку нам понадобится JQuery. Итак идем на сайт Jqeury качаем библиотеку и подключаем к сайту или страничке. Далее пишем функцию по которая бы обрабатывала событие при наведении на картинку

$('img').hover(function(){});

Тут вроде бы все понятно, при наведении на элемент img вызывается функция. Так же если вам не надо чтобы выводилось на каждую картинку, а только на определенную можно использовать класс.

$('.classimg').hover(function(){});

Следующее что мы должны сделать это создать новый элемент img. Добавляем этот элемент в самый конец тела сайта, дабы ничего не разъехалось

$("body").append("<img class='abs' src="+this.src+">");

this.src в этом коде значит что мы берем атрибут адрес картинки у текущего элемента. После того как мы добавили картинку она же появится внизу тела. Но зачем нам это, наша картинка наверху, а полноразмерное изображение где то там. добавим немного css.

.abs {
    position: absolute;
    height: 200px;
    box-shadow:0px 0 10px #000;
}

Здесь мы добавили абсолютное позиционирование расположение на экране мы добавим чуть позже с помощью Jquery. Ограничил размер картинки 200px, и дабы выделить как то картинку добавил тень. Осталось совсем чуть чуть, отобразить картинку рядышком с текущей картинкой и при движении мышки по картинки двигалось и само изображение. Так сделаем же.

 $("img").mousemove(function(e){
    $(".abs").css('left',(e.pageX + 20)+"px");
    $(".abs").css('top', (e.pageY - 20)+"px");
})

При движении мыши по картинке передаем параметры event`а (e), b добавляем к картинке с классом css left и top с текущим положением мыши +-20px. И наконец последний штрих при окончании наведения на мыши надо убрать картинку. Решается это вот этой строчкой

$(".abs").remove();

Забыл сказать что у event hover можно сделать функции. Первая функция будет выполняется при начале event, а вторая при окончании. Поэтому удалении картинки выполняется во второй функции. В результате у нас получился следующий код:  

$("img").hover(function(){
     $("body").append("<img class='abs' src="+this.src+">");   
    $("img").mousemove(function(e){
    $(".abs").css('left',(e.pageX + 20)+"px");
    $(".abs").css('top', (e.pageY - 20)+"px");
    })
    
},function(){
    $(".abs").remove();
});

А результат выполнения вы можете посмотреть здесь