Сегодняшняя статья будет посвящена созданию эффекта увеличения картинки с помощью jquery. Такой эффект может здорово приукрасить, к примеру, ваше портфолио и плюс поможет сэкономить место на странице так как описание будет располагаться на картинке, что позволит показать больше превьюшек ваших работ на одной странице.

HTML

Каждое превью будет состоять из двух контейнеров <div>: первый блок будет обрамляющим, а второй будет находиться внутри первого и в нем будет находится заголовок превьюшки. Также внутри первого контейнера, над блоком с заголовком будет находиться сама картинка.

<div class="item">
    <img height="271" width="304" src="images/img.jpg">
    <div class="caption"> <a href="#">Jennifer Johnston</a>
    	<p>Scottish voiceover Jennifer Johnston. Branding, site design and development</p>
    </div>
</div>

CSS

.item {
	width:304px;
	height:271px;
	border:4px solid #333;
	margin:30px 12px 10px 5px;
	overflow:hidden;
	position:relative;
	float:left;
}
.item .caption {
	width:304px;
	height:71px;
	bottom:0;
	color:#fff;
	background:#000;
	font-weight:700;
	position:absolute;
	left:0;
	display:none;
	filter:alpha(opacity=82);
	-moz-opacity:0.9;
	opacity: 0.9;
}
.item .caption a {
	text-decoration:none;
	color:#0cc7dd;
	font-size:17px;
	letter-spacing:-1px;
	font-family:Arial, Helvetica, sans-serif;
	padding:5px;
	display:block;
}
.item .caption p {
	padding:5px;
	margin:0;
	color:#fff;
	line-height:15px;
	font-size:12px;
}
.item img {
	border:0;
	position:absolute;
}

jQuery

В приведенном скрипте ниже вы можете видеть две переменные: zoom и move. Также вы можете заметить, что перед переменной zoom пропущенно ключевое слово var, это не принципиально конечно, но jQuery позволяет при определении группы переменных использовать только одно ключевое слово var для всей группы.

Следующим шагом является установка функции .hover, которая будет срабатывать каждый раз когда курсор мыши будет наведен на картинку. Эта функция будет увеличивать ширину и высоту изображения при наведении и изменять прозрачность заголовка, а когда курсор будет убираться пользователем с картинки, то значения высоты, ширины и прозрачности будут возвращаться к начальному состоянию.

$(document).ready(function() {

        var zoom = 1.1
              move = -15;

	$('.item').hover(function() {

		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;

		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:300});
		$(this).find('div.caption').stop(false,true).fadeIn(300);
	},
	function() {

		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:300});
		$(this).find('div.caption').stop(false,true).fadeOut(400);
	});

});

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