Принцип данного эффекта заключается в том, что слой с картинкой накладывается на контент скрывающийся за изображением, а плагин jQuery плавно «приподнимает» изображение в момент наведения на него курсором мыши.
Для подключения на сайт этого эффекта надо подгрузить библиотеку jQuery (если она ещё не подгружена), файл с каскадными таблицами стилей и добавить в документ код инициализации, все необходимые файлы в архиве контент за изображением.
В коде инициализации плагина можно изменить некоторые настройки:
$(function() {
$(".slideBox").hover(function(){
$(this).find("img").stop().animate({
top:-213
}, 500);
}, function(){
$(this).find("img").stop().animate({
top:0
}, 500);
});
});
$(function() {
$(".slideBoxSphere").hover(function(){
$(this).find("img").stop().animate({
top:-200
}, 1500);
}, function(){
$(this).find("img").stop().animate({
top:0
}, 4500);
});
});В этом коде две функции с 1 по 11 строку для первого изображения, остальное для второго.+ В 4-ой строке указывается высота на которую будет «приподниматься» изображение, у меня указана высота изображения.+ В 5-ой строке указывается время «поднятия» изображения.+ В 8-ой строке указывается в какое положение должно вернуться изображение 0 — по умолчанию (исходная позиция).
+ В 9-ой строке указывается время «опускания» изображения.