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

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

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

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

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

Html код:

<a class="st" href="javascript:">

<div class="img"><img src="http://bitby. net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div>

</a>

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

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

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

<a class="st" href="javascript:">

<div class="img"><img src="http://bitby. net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div>

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

$(function()<

$('.img').hover(function()<

$(this).children('img').stop().animate(, 400);

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