Плавное увеличение картинки при наведении курсора

Плавное увеличение картинки при наведении курсора

Раньше я писал об увеличение картинки при наведении при помощи css. Но она была не доработана.

Совсем недавно, мне требовалось сделать что-то похожее, только на jQuery. И я доделал тот пример и добавил эффекты при помощи jQuery. Вообщем у меня получилось два варианта:

  1. С использованием CSS, без jQuery.
  2. С использованием CSS и jQuery.

Сейчас я покажу вам два варианта.

1. С использованием CSS, без jQuery

Html код:

Css стили:

a.st .img{width:100px;height:124px;overflow:hidden;}
a.st .img img{width:100px;height:124px;}
a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}
a.st:hover .img img{visibility:visible;width:250px;height:274px;position:absolute;z-index:150;}

По сравнению с вариантом в прошлой статье, этот не раздвигает другой html вокруг. То есть картинка сама по себе, но в то же время, за ней закреплено место для маленькой картинки.

2. С использованием CSS и jQuery

Здесь мы оставим html код таким же, как и в предыдущем примере:

Вот теперь, css изменится:

a.st .img{width:100px;height:124px;}
a.st .img img{width:100px;height:124px;}
a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}
a.st:hover .img img{visibility:visible;position:absolute;z-index:150;}

Принципы css одинаковы в двух вариантах, только во втором, ширину и высоту мы будем трансформировать при помощи jQuery.

JQuery скрипт:

$(function(){
$('.img').hover(function(){
$(this).children('img').stop().animate({width:"250px",height:"274px"}, 400);
}, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); });
});

При наведении курсора, мы плавно трансформируем ширину и высоту объекта, а затем, когда курсор будет убран, возвращаем css в исходное положение, опять же плавно.

Вот мы и разобрали два примера реализации. Плюсы и минусы я приводить не буду, но скажу так, существенных проблем нет у обоих примеров.

Работает: Mozilla Firefox 3.5.2, Opera 10.00, Chromium 4.0.204.0, Konqueror 4.3.1.

Если вы нашли ошибку в коде, сообщите пожалуйста в комментариях.

16 сентября 2009 в 8:4692 комментария Верстка, ,

Комментарии — 92 комментария

  1. #47540 Freddy в 19:14, 25 февраля 2015:

    Ответить | Цитировать

    WebMast писал(а):

    #9389 WebMast в 18:50, 24 февраля 2010:
    Ответить | Цитировать
    Меняешь в css ширину и высоту:
    a.st .img{width:100px;height:124px;}
    a.st .img img{width:100px;height:124px;}
    a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}
    a.st:hover .img img{visibility:visible;position:absolute;z-index:150;}
    Все значения width — меняешь на начальную ширину своей картинки.
    Все значения height — меняешь на начальную высоту своей картинки.
    Далее скрипт:
    $(function(){
    $(‘.img’).hover(function(){
    $(this).children(‘img’).stop().animate({width:»250px»,height:»274px»}, 400); // Значения ширины и высоту, когда навели курсор.
    }, function(){ $(this).children(‘img’).stop().animate({width:»100px»,height:»124px»}, 400); // Начальные значения ширины и высоты.
    });
    });

    Красавчик!
    После твоего комента всё заработало!

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting