Фото эффект обратного зума для сайта

В этом уроке я покажу как при помощи JQuery создать эффект обратного зума при наведение на изображение. Этот эффект можно использовать при созданий фото галереи.

Для начала создаем контейнер(div с классом container) в котором будем размещать наши фотографии. И внутри это контейнера размещаем блоки с фотографиями(div с классом wrap). Внутри контейнера можно разместить сколько угодно блоков wrap заменяя лишь путь к фото.

Html код

 <div id="container" class="container">			
	<div class="wrap">
		<a href="/">
			<img src="images/image1.jpg" alt="Picture 1"/>
		</a>
	</div>
	...
	<div class="wrap">
		<a href="/">
			<img src="images/image1.jpg" alt="Picture 1"/>
		</a>
	</div>
	<!--РАЗМЕСТИТЬ МОЖНО СКОЛЬКО УГОДНО БЛОКОВ-->
</div>

Ниже контейнера размещаем JQuery код в котором будем менять размер изображения.

JQuery код

<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
	$(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.8','height':'500px','top':'-66.5px','left':'-150px'});
			}
		);
	});
</script>

Результат

Готовый пример — Скачать

Источник — http://tympanus.net/codrops/2010/03/07/photo-zoom-out-effect-with-jquery/