Увеличение картинки при наведении

В сегодняшнем уроке, я бы хотел представить вам хороший вариант для галлерей.

Процесс: Имеется картинка, в уменьшенном варианте, которую при наведении на нее курсора, можно увеличить. Причем все делается при помощи css. Вот сразу пример: zoom_image.html

В послденее время, я перестал вам лить воду на уши, поэтому старался закомментировать вам каждую строку..

CSS:
/* Задание стилей для уменьшенного варианта*/
a.st img {
width:100px; /* Задание ширины миниатюры */
border:3px solid #c8c8c8; /* Задание границы */
}

/* Задание стилей для целого изображения */
a.st:hover img {
position:relative; /* Задание позиции увеличенного изображения */
top:-30px; /* Задание отклонения увеличенного изображения вверх(НЕ ОБЯЗАТЕЛЬНО) */
width:200px; /* Задание ширины увеличенного изображения */
}
HTML:
<a class="st" href="#"><img src="1.png" alt="" title="" /></a>