В этой статье будет показано как с помощью библиотеки jQuery можно сделать очень симпатичный эффект уменьшения изображения. Идея этого эффекта заключается в том, что изначально показываются искусственно увеличенные изображения, а при наведении курсора мыши размер уменьшается до нормального.

html

Наша галерея будет состоят из множества контейнеров div с классом wrap, в которых будут находится изображения:

<div class="wrap">
	<a href="#">
		<img src="images/image1.jpg" alt="Picture 1"/>
	</a>
</div>
<div class="wrap">
	<a href="#">
		<img src="images/image2.jpg" alt="Picture 2"/>
	</a>
</div>
<div class="wrap">
	<a href="#">
		<img src="images/image3.jpg" alt="Picture 3"/>
	</a>
</div>
<div class="wrap">
	<a href="#">
		<img src="images/image4.jpg" alt="Picture 4"/>
	</a>
</div>
<div class="wrap">
	<a href="#">
		<img src="images/image5.jpg" alt="Picture 5"/>
	</a>
</div>
<div class="wrap">
	<a href="#">
		<img src="images/image6.jpg" alt="Picture 6"/>
	</a>
</div>

Все изображения имеют одинаковые размеры – 500px / 333px. Мы используем изображения одинакового изображения для того, чтоб эффект уменьшения был одинаковым на всех изображениях. Вы можете использовать картинки разных размеров, но должны будете править jQuery скрипт, чтоб zoom эффект оставался плавным.

css

.wrap{
    width:200px;
    height:200px;
    margin:0px;
    overflow:hidden;
    position:relative;
    float:left;
}
.wrap a img{
    border:none;
    position:absolute;
    top:-66.5px;
    left:-150px;
    height:500px;
    opacity: 0.5;
}

Для контейнеров .wrap мы устанавливаем относительное позиционирование, так как для самих изображений будет использовано абсолютное позиционирование. А также мы стилями изображения сдвигаем влево и вверх, чтоб скрыть часть и устанавливаем им прозрачность.

jQuery

$(function() {
	$('.wrap img').hover(
		function(){
			var $this = $(this);
			$this.stop().animate({
					'opacity':'1.0',
					'height':'200px',
					'top':'0px',
					'left':'0px'
				});
		},
		function(){
			var $this = $(this);
			$this.stop().animate({
				'opacity':'0.5',
				'height':'500px',
				'top':'-66.5px',
				'left':'-150px'
				});
		}
	);
});

Принцип работы скрипта очень просто: при наведении значение left и top устанавливаются в ноль и прозрачность убирается. Вот и все, вам лишь остается скопировать код описанный в этой статье и немного поправить его, чтоб ваши изображения не искажались.