top of page

Dicas de Web Design – Adicione Um Efeito Mouseover nas Imagens do Seu Site

Atualizado: 17 de jan. de 2019



A plataforma do Wix é repleta de recursos de design incríveis, e enquanto alguns são óbvios, outros (como o efeito mouseover) dão um pouco mais de trabalho para achar. Por isso, estamos aqui para dar uma luz sobre estes recursos fantásticos que podem ter passados despercebidos!


A dica de hoje é sobre o efeito mouseover em imagens, como adicioná-lo e as razões que provavelmente vão levá-lo a querer incorporar este efeito ao design do seu site.


Adicionar este efeito às suas imagens vai dar um algo a mais ao fator interatividade do seu site. Os internautas vão querer ver o que acontece ao passar o mouse em suas imagens, botões e mais, na esperança de haver alguma reação. Ter um site interativo, em geral, vai manter as pessoas por mais tempo navegando no seu site – e quanto mais tempo as pessoas navegam, maior a chance de explorarem seu site mais a fundo, se tornarem fãs ou até mesmo fazer uma compra.



Um Exemplo Impressionante: www.naomikizhner.com


Não dá para negar: A Naomi Kizhner usou este recurso de forma perfeita. Se você é como nós, vai passar o mouse em cima de cada foto no site da Naomi para ver cada uma das imagens ficar colorida. Ela ainda levou este efeito ao extremo com a escolha minimalista do esquema de cores e do design do seu site, todo em diversos tons de cinza e usando um layout organizado. O paraíso para o mouseover.



Dicas de Web Design - Adicione Um Efeito Mouseover nas Imagens do Seu Site


Como Fazer Isto Em Seu Site


Agora a parte técnica! A seguir, o passo-a-passo:


No editor, clique no ícone Adicionar > Botões e Menus > Botão de Imagem:



Dicas de Web Design - Adicione Um Efeito Mouseover nas Imagens do Seu Site

Duplo clique em Botão de Imagem para ver as configurações:


Dicas de Web Design - Adicione Um Efeito Mouseover nas Imagens do Seu Site

Escolha sua visualização padrão e sua visualização mouseover. Pense como se fosse o “antes e o depois” do efeito mouseover:


Dicas de Web Design - Adicione Um Efeito Mouseover nas Imagens do Seu Site

Veja como vai ficar quando passa o mouse em cima da imagem:


Dicas de Web Design - Adicione Um Efeito Mouseover nas Imagens do Seu Site

E não esqueça! Como isto é um botão, ele deve ter um link para algum lugar. Os internautas vão estar prontos para clicar assim que passarem o mouse em cima da imagem, então é preciso estabelecer a visualização pós clique. Talvez uma página de um produto?




Dica Útil: Preparar suas imagens antecipadamente é uma grande ideia. Para que esta mágica do mouseover aconteça, você precisa ter duas versões da imagem. A escolha clássica é ter uma versão em preto e branco e a outra colorida. E o melhor de tudo? Você pode criar estas duas versões sem sair do Wix, usando o Editor de Imagem do Wix!



Dicas de Web Design - Adicione Um Efeito Mouseover nas Imagens do Seu Site


Efeitos ainda mais divertidos que podem ser feitos com este recurso


Agora que você já aprendeu a usar o mouseover, não precisa parar por aqui. Há tantas opções de design legais para usar este efeito que a seguir vamos mostrar mais alguns que nós simplesmente adoramos.


Usar textos em forma de pop-up é uma outra opção do efeito mouseover e mais uma excelente forma de interatividade para os visitantes de seu site:



Dicas de Web Design - Adicione Um Efeito Mouseover nas Imagens do Seu Site

Usar uma imagem que altera ligeiramente (ou altera muito) ao passar o mouse por ela:


Dicas de Web Design - Adicione Um Efeito Mouseover nas Imagens do Seu Site

Alternar entre modernas imagens vetoriais:


Dicas de Web Design - Adicione Um Efeito Mouseover nas Imagens do Seu Site

As possibilidades do recurso mouseover são infinitas, por isso agora é só usar!


Já criou o seu site? Escolha um template e comece já!



E gostou deste artigo? Digite seu email aqui e receba mais conteúdo como esse em sua caixa de email!


pt03.png
bottom of page