Saiba como criar um efeito de hover e zoom apenas com CSS3

Olá pessoal, tudo bom?
Neste tutorial irei explicar como fazer para criar um efeito de hover muito bacana, com zoom na imagem ou texto, retina e muito mais.
Espero que gostem.
Vamos lá!

EXEMPLO

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, temporibus, repellat? Placeat nihil itaque culpa eu.

Saiba mais

PASSO 1: CRIANDO O HTML

Primeiramente vamos começar estruturando nosso html.

  1. Vamos criar uma div que irá receber a ação do hover.
  2. Dentro dessa div iremos acrescentar um elemento que ficará escondido para funcionar como retina.
  3. Podemos acrescentar um ícone ou texto dentro do elemento retina para aparecer durante o hover

Como disse, dentro do elemento .retina vocês podem adicionar o que acharem necessário.

PASSO 2: MONTANDO O CSS

Para criar esse efeito nós vamos precisar trabalhar com as propriedades transition e transform do CSS3.

Com essas 2 propriedades nós vamos adicionar a forma de transição do hover e modificar a escala da imagem.

Agora vamos ao CSS.

ANALISANDO

Basicamento o que nós fizemos foi:

  1. Estipular uma largura para a div.hoverzoom e adicionar a propriedade position: relative para dar uma referência de posição ao elemento “.retina”.
  2. Manipular o efeito de transição do estado normal para o hover com a propriedade “transition”, declarando a velocidade de transição com cubic-bezier para ter uma movimentação mais estilizada.
  3. Aumentar a escala da imagem durante o processo de :hover com a propriedade “transform: scale()”.
  4. Deixar a “.retina” com opacidade 0 em seu estado normal e durante o :hover com opacidade 1.
  5. Estilizar os demais elementos internos da .retina.

FINALIZANDO

Esse efeito é bem simples de ser feito, mas sua apresentação é muito bacana e bem valorizada.
Futuramente irei trazer outros tipos de efeitos com CSS3. Não percam!

Se gostaram, não deixem de comentar e compartilhar com seus amigos, ok?

Muito obrigado e até a próxima.

TAGS: , , ,

AUTOR: Gabriel Costa
Gabriel Costa

Trabalho com desenvolvimento web a mais de 5 anos e atualmente desenvolvo projetos para órgãos do governo federal na área de interface digital, programação e design. Tenho parceria na empresa AidWeb - Desenvolvimento web e trabalho desenvolvendo websites e protótipos de sistemas acessíveis e responsíveis.

ARTIGOS RELACIONADOS

22

Deixe o seu comentário!

  1. Mauricio disse:

    É um ótimo efeito! Vasculhei a internet atrás disso até achar esse post.
    Já implementei aqui só que de uma forma um pouco mais discreta: sem o sombreamento, texto e botão. Porém estou com um problema. Eu preciso colocar um link sobre a imagem com efeito (sem botão) e não estou conseguindo… quando insiro o link usando o efeito não funciona.
    Qual é o modo correto de inserir o link na imagem e continuar usando o efeito?

    Abraço!

    • Gabriel Costa Gabriel Costa disse:

      Olá Maurício.
      Obrigado pelo seu comentário.
      Eu iria precisar olhar seu código para entender qual o erro..
      Entre em contato comigo por email para conversarmos, ok?
      Até mais..

  2. Muito Obrigado cara, você me ajudou muito, estou começando nessa área de programação por conta própria, apenas através de tutoriais na internet e é muito bom quando encontro alguém disposto a compartilhar de alguma forma o que sabe, meu site ficou muito mais bonito com esse efeito! Muito Obrigado!

    • Gabriel Costa Gabriel Costa disse:

      Olá Joel,
      Muito obrigado a você pelos elogios… Estou tentando ao máximo voltar a publicar novos tutoriais aqui… Em breve teremos coisa nova.. =)
      Bons estudos e no que eu poder te ajudar, vai ser um prazer…

      Obrigado.

  3. Daniel disse:

    Ficou muito bom. Mas me tira uma duvida. Como eu faco pra imagem não ficar pixelizada? Eu tinha que colocar uma imagem maior e mudar as propriedades dela no HTML?

  4. Mauricio Trindade disse:

    Show de bola! Parabéns e sucesso!

  5. Excelente artigo. Irei usar nos próximos jobs! Parabéns!

  6. Felipe disse:

    Como faço para este efeito ser responsivo?

    • Gabriel Costa Gabriel Costa disse:

      Olá Felipe, boa tarde!
      Para ficar mobile, precisa-se fazer o efeito com javascript ou algumas outras funcionalidades do CSS3, como animation. Da forma que está, ele realmente não fica responsivo.
      Obrigado.

  7. Junior disse:

    Cara, esse efeito é muito legal. Pena que não consegui colocar o link em todo a div, mas de qualquer forma muito obrigado por compartilhar.

  8. Fabio disse:

    Amigo, é para versão mobile e tablet? quando clica o efeito não funciona.

    • Gabriel Costa Gabriel Costa disse:

      Olá Fabio, boa tarde!
      Eu não cheguei a testar no mobile, mas acredito que esse efeito realmente não irá funcionar do mesmo jeito, devido ao touch. Eu acho que você vai precisar dar um toque primeiro para o hover funcionar.

  9. David disse:

    Ta mas eu coloco isso aonde? Isso que ninguem fala

  10. Moacir disse:

    Parabens o tutorial é show! mas teria como colocar em um grid para ficar parecido com o site do filme on line gratis?

    • Gabriel Costa Gabriel Costa disse:

      Olá Moacir,
      Você poderia utilizar o bootstrap para colocar em grid o seu site, e deixá-lo responsivo.
      Caso não saiba trabalhar com bootstrap, tenho alguns tutoriais aqui no site.
      Obrigado pelo seu comentário.

  11. cleiton disse:

    muito bom o efeito velho, parabéns!

Autentificado como . Sair desta conta »

<pre lang="aqui vai o tipo de linguagem (js, html, css, php...)">
   Agora você posta seu código a vontade!
</pre> //aqui você fecha o código