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.
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:
Duplo clique em Botão de Imagem para ver as configurações:
Escolha sua visualização padrão e sua visualização mouseover. Pense como se fosse o “antes e o depois” do efeito mouseover:
Veja como vai ficar quando passa o mouse em cima da imagem:
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!
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:
Usar uma imagem que altera ligeiramente (ou altera muito) ao passar o mouse por ela:
Alternar entre modernas imagens vetoriais:
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!
