Ir para conteúdo
Jack Oliveira

Ampliar imagem com css efeito zoom

Recommended Posts

Ola boa @Maujor ou @Motta

Quero fazer um efeito zoom na imagem quando passar o mause ela ser ampliada 

Fiz de um jeito porem ela aumenta também o código <td><img></td> quando passa o mause

quero que apenas a imagem ela se amplia um jeito que ela passe por cima ou seja trazendo bem a frente da tela

 

Meu CSS

<style>
.ampliar-zoom a{
  display: none;
 }

.ampliar-zoom:hover{
        width:200px;
    height:150px;
  box-shadow: 0px 0px 100% #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.1);   
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.1);
  transition: all 200ms ease-in;
  transform: scale(1.1);
}

.ampliar-zoom:hover a{
  display:block;
}
</style>

Código do HTML

<td><img class="ampliar-zoom" src="/assets/portfolio/teste-imagem.jpg" width="30px"></td>

Bom espero que possa ter entendido ai.....

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.