Сегодня я покажу Вам как создать простой эффект зума с помощью jQuery.

Идея заключается в показе приближенных изображений и при наведении мышки изображение отъезжает назад и становится полностью видимым.

Подобный эффект может быть использован на различных сайтах фотографов и фотогалерей. В демо версии используется черно-белые фотографии.

Поехали!!!

Разметка

Мы создадим несколько оберток для наших изображений в виде div'ов. Эти обертки будут скрывать все части фотографии за пределами, так как мы не хотим, чтобы фото показывалось полностью. Внутри у нас будет ссылка.

<div class="wrap">
	<a href="http://www.flickr.com/photos/archetypefotografie/3601313864/">
		<img src="images/image1.jpg" alt="Picture 1"/>
	</a>
</div>
<div class="wrap">
	<a href="http://www.flickr.com/photos/vegaseddie/3910559910/">
		<img src="images/image2.jpg" alt="Picture 2"/>
	</a>
</div>
<div class="wrap">
	<a href="http://www.flickr.com/photos/62337512@N00/445175934/">
		<img src="images/image3.jpg" alt="Picture 3"/>
	</a>
</div>
<div class="wrap">
	<a href="http://www.flickr.com/photos/brunociampi/2461177417/">
		<img src="images/image4.jpg" alt="Picture 4"/>
	</a>
</div>
<div class="wrap">
	<a href="http://www.flickr.com/photos/beadmobile/3298460491/">
		<img src="images/image5.jpg" alt="Picture 5"/>
	</a>
</div>
<div class="wrap">
	<a href="http://www.flickr.com/photos/tonythemisfit/3839281139/">
		<img src="images/image6.jpg" alt="Picture 6"/>
	</a>
</div>

У всех изображений одинаковый размер (500 на 333 пикселей), так как мы хотим схожий эффект. Вы можете использовать изображения разных размеров, но имейте ввиду, что Вам придется править JavaScript для правильной работы.

CSS

Обертка для ссылки и изображения будут float left и иметь относительное положение. Изображение будет абсолютно позиционировано.

.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;
}

Как мы упоминали раньше у изображения высота 333 пикселей. Мы хотим, чтобы изображение приближалось, поэтому ставим размер больше. В этом примере - это 500 пикселей. Когда мы определяем размер только по одной стороне, изображения соответственно изменит и другую сторону, и Вам не надо за нее переживать.

JavaScript

Функция для наведения мышкой на изображения будет предельно простой: мы делаем изображение прозрачным, меняем высоту до 200 пикселей и выставляем top и left на 0. При отводе мышки - все возвращается на свои места.

$(function() {
	$('#container 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'
				});
		}
	);
});

Вот и готово! Надеюсь, Вам понравилось! :)