1

Eu estou criando um site de tattoos que contém uma galeria de fotos. Eu gostaria que quando o usuário passasse o mouse por cima de uma imagem ela fosse ampliada para um tamanho maior.

Sou iniciante em montagem de sites, entendo um pouco de HTML e CSS; no entanto, não tenho conhecimento de JavaScript.

1
  • Tem uns plugins jQuery bem bacanas pra fazer essas coisas. Um dos mais interessantes que já ví é o jQuery Zoom. Além de bonito e funcional a sua "instalação" é bem fácil, tem o passo-a-passo ali no site. Se tiver problemas avise. 28/05/2015 às 11:03

3 Respostas 3

4

Existem diversas formas de resolver seu problema, mesmo todas derivando de uma única. Pode usar soluções prontas - pesquisando no Google, encontrará várias bibliotecas livres e/ou pagas - ou criá-las do zero.

Aqui proponho um exemplo para que você possa trabalhar em cima. Ele apenas amplia/reduz a imagem sem grande beleza envolvida.


var entidade = document.getElementById('imagem');

// Altere o número para a apliação/redução desejada
var fator_lupa = 2;

entidade.onmouseover = function () { this.style.width = (this.clientWidth * fator_lupa) + "px"; };

entidade.onmouseout = function () { this.style.width = (this.clientWidth / fator_lupa) + "px"; };
<img id="imagem" width="200" src="https://www.google.com.br/images/srpr/logo11w.png" />


Aqui tem um link do JSFiddle para exemplo do código em funcionamento no caso da pré-visualização do SOpt não funcionar: JSFiddle

Espero ter ajudado!

3

É possível fazer sem uso JavaScript, o que acho mais bacana. Usando a propriedade transform:scale do CSS3:

img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

Fonte com mais informações.

0
-1

HTML:

<img src="/img/fundo.jpg" >

CSS:

img:hover{
   height: 50%;
   width: 50%;
  }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .