Criando um efeito de zoom apenas com CSS3

Um simples efeito que valoriza o conteúdo do site, a dica de hoje é para criar um efeito de zoom quando se passar o mouse por cima da imagem (hover). Abaixo segue um exemplo do resultado final.

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 iremos trazer outros tipos de efeitos com CSS3. Não percam!

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

Dica retirada de: TutorialWebDesign

A Turbosite compartilha conhecimento, somos uma empresa de Hospedagem de Sites com mais de 15 anos no mercado. Se precisar de uma hospedagem, sua solução é a Turbosite!


4 Comentários

  1. Tiago outubro 16, 2014 8:17 pm  

    Vlw cara, realmente muito bom este efeito. De uma passa no meu blog 🙂

  2. Gil Alves março 15, 2016 3:28 pm  

    PARABÉNS! FAZ DIAS QUE ESTOU ATRAS DESSE CÓDIGO! MUITO OBRIGADO. ESTOU DANO UMA REPAGINA NO MEU SITE. E PRECISA DE UM COD DESSES PARA AUMENTAR A IMAGEM NA HORA QUE PASSA O MOUSE. SÉRIO. DEPOIS DE DIAS PROCURANDO ACHEI AQUI NO TURBO SITE. JA ESTA SALVO EM MEUS FAVORITOS.

  3. Claudio Pong março 30, 2016 11:07 am  

    Ótimo amigo!!!! perfeito, muito obrigado.

  4. Jeferson julho 6, 2016 5:18 pm  

    Genial, era isso que queria, mas não estou sabendo onde colocar os códigos. Seria possível você explicar o passo a passo? Por exemplo: Onde é que coloco o código da div que você descreveu no blogger? E em que parte do HTML do blogger eu coloco o CSS?

Deixe uma resposta

*