Zoom com HTML ou CSS - Imagens

Question

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

F�bio F. · Answer

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>

Claudio Aguiar · Answer

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

Fabricio Alves · Answer

Copiando esse c�digo....

Claudio Aguiar · Answer

Fabio F.?...

Claudio Aguiar · Answer

Fabio F.?...

F�bio F. · Answer

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

Claudio Aguiar · Answer

Obrigado pelo retorno Fabinhokls, vou testar....

Claudio Aguiar · Answer

Obrigado pelo retorno Fabinhokls, vou testar....

Claudio Aguiar · Answer

Quase que n�o entendo, mas consegui! Muito obrigado....

Gabriela Monte · Answer

N�o tinha entendido o c�digo at� testar! Gostei e n�o sabia que o CSS poderia fazer isso arquivos de imagem....

F�bio F. · Answer

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!...

Claudio Aguiar · Answer

Ta certo Fabinhokls....

Gabriela Monte · Answer

Obrigada Fabin....

F�rum Zoom com HTML ou CSS - Imagens #522778