Criando um efeito de zoom apenas com CSS3

09:15

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
<div class="hoverzoom"> <img src="/blog/wp-content/uploads/2014/09/exemplo-turbosite.jpg"> <div class="retina"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, temporibus, repellat? Placeat nihil itaque culpa eu.</p> <a href="#">Saiba mais</a> </div></div>

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.

.hoverzoom { position: relative; width: 350px; overflow: hidden;}.hoverzoom > img { width: 100%; border-radius: 2px; -webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);}.hoverzoom:hover > img { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5);}.hoverzoom .retina{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); border-radius: 2px; text-align: center; padding: 30px; -webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); }.hoverzoom:hover .retina { opacity: 1; box-shadow: inset 0 0 100px 50px rgba(0,0,0,.5); }.hoverzoom .retina p { color: #fff;}.hoverzoom .retina a { display: block; width: 150px; background: #6fc5e9; border: 1px solid #59afd4; border-radius: 4px; color: #fff; text-decoration: none; text-align: center; padding: 10px 15px; margin: 16px auto 0;}

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 – Hospedagem de Sites!