Раньше я писал об увеличение картинки при наведении при помощи css. Но она была не доработана.
Совсем недавно, мне требовалось сделать что-то похожее, только на jQuery. И я доделал тот пример и добавил эффекты при помощи jQuery. Вообщем у меня получилось два варианта:
- С использованием CSS, без jQuery.
- С использованием 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.
Если вы нашли ошибку в коде, сообщите пожалуйста в комментариях.
Ответить | Цитировать
Красавчик!
После твоего комента всё заработало!