Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

×

Informação importante

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