Imagem com efeito de Zoom com jQuery

Então, hoje eu vou correr pela técnica usada para ampliar as miniaturas das imagens e exibir a sobreposição de texto.

jquery-thumbs

O HTML

Há dois DIV que compõem a construção de cada elemento, primeiro temos fora. Div item que é o recipiente para a nossa imagem e legenda. Diretamente dentro do ‘item’ div nós temos a imagem com o div ‘caption’ logo abaixo que, com um link e dentro de tag de parágrafo. dê uma olhada na estrutura do código e da imagem abaixo para ver a construção dos elementos div.

structure

<div class="item">

<img src="http://papermashup.com/wp-content/themes/arthemia/portfolio/images/jennifer.jpg" height="271" width="304" />

<div class="caption">

<a href="http://jenniferjohnston.tv">Jennifer Johnston</a>

<p>Scottish voiceover Jennifer Johnston. Branding, site design and development</p>


</div>



</div>


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

O JavaScript

Você pode ver que nós estamos definindo duas variáveis​​, ‘zoom’ e ‘move’. Observe que em vez de declarar var novamente na frente ‘move’ a variável omiti-lo. Isso porque, se estamos definindo múltiplas variáveis ​​com jQuery você não precisa adicionar cada vez var, os valores são quase acorrentado.

Os próximos passos são que configurar um. Função de foco que, quando acionado irá animar a largura e altura da imagem para dar a impressão de que a imagem é diminuir o zoom, também estamos animando a legenda para fade in e out em foco.


$(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);
 });

});

Para ver a demostração clique aqui, para baixar clique aqui.

Fonte: http://papermashup.com/jquery-image-zoom-effect/

wiliamluis

Deixe sua resposta