Jquery Image всплывающее при наведении

Question

Мне было интересно, как можно сделать этот эффект перехода в jQuery -

У меня есть изображение, когда я наводю на него мышью, изображение слегка смещается (увеличивается в размере), а когда я наводю курсор на изображение, оно возвращается к своему первоначальному размеру.

Это поведение похоже на то, что мы видим в Google Images

Answer 1

Я не уверен насчет jQuery, но вы можете использовать переходы CSS3. Переходы CSS3 работают не во всех браузерах, но если вы хотите повеселиться в FF и Webkit ...

Предполагается, что ваши изображения обернуты в <a> теги ( Редактировать: Пример @ http://jsfiddle.net/Kai/x4Frn/):

a img {
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
}

a:hover img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);

    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

Answer 2

Проверьте ссылки ниже -

http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

http://justinfarmer.com/?p=31

Вы можете найти больше из них.