Zoom com HTML ou CSS - Imagens

Front-end

13/06/2015

Alguem sabe como fazer com (css ou html) um tipo de zoom para imagens?
Claudio Aguiar

Claudio Aguiar

Curtidas 0

Respostas

Fábio F.

Fábio F.

13/06/2015

No caso se você utiliza uma div para mostrar a imagem ao invés de um elemento img, isso seria mais fácil justamente porque você terá como alterar o background-size.
Muita gente usa este efeito erradamente com o JavaScript ou Jquery, mas foi criada soluções para ele no CSS3. E a melhor seria com o background porque se tentar fazer com a altura ou largura para dar zoom, pode ser que isso venha interferir no local da imagem.
Mas é claro que existem vários tipos de zoom, então eu criei um no CSS3 pra você ver como eu faria mais ou menos...
(Passe o mouse sobre a imagem para ver o efeito funcionar.)
<!DOCTYPE html>
<html>
	<head>
		<title>Testes</title>
	</head>
	<body>
		<style type="text/css">
			.foto {width: 400px; height: 400px; background-image: url("01.jpg"); background-size: 100% auto; transition: background-size 1s; -webkit-transition: background-size 1s;}
			.foto:hover {background-size: 120%;}
		</style>
		<div class="foto"></div>		
	</body>
</html>
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

13/06/2015

Funcionou perfeitamente, mas tem como deixar esse zoom mais centralizado?
GOSTEI 0
Fabricio Alves

Fabricio Alves

13/06/2015

Copiando esse código.
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

13/06/2015

Funcionou perfeitamente, mas tem como deixar esse zoom mais centralizado?


Fabio F.?
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

13/06/2015

Funcionou perfeitamente, mas tem como deixar esse zoom mais centralizado?


Fabio F.?
GOSTEI 0
Fábio F.

Fábio F.

13/06/2015

Fácil, só colocar um css na classe .foto!
Insira os dados

background-position: center center;
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

13/06/2015

Obrigado pelo retorno Fabinhokls, vou testar.
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

13/06/2015

Obrigado pelo retorno Fabinhokls, vou testar.
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

13/06/2015

Quase que não entendo, mas consegui! Muito obrigado.
GOSTEI 0
Gabriela Monte

Gabriela Monte

13/06/2015

Não tinha entendido o código até testar! Gostei e não sabia que o CSS poderia fazer isso arquivos de imagem.
GOSTEI 0
Fábio F.

Fábio F.

13/06/2015

Agradeço por te ajudado, qualquer coisa entre no meu site www.fabinhokls.com.br ou entre em contato comigo através do e-mail: contato@fabinhokls.com.br!!!
Agradeço!
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

13/06/2015

Ta certo Fabinhokls.
GOSTEI 0
Gabriela Monte

Gabriela Monte

13/06/2015

Obrigada Fabin.
GOSTEI 0
POSTAR