Hover Effect CSS é, em suma, uma parte do grupo de palavras-chaves que são usadas pelas pseudo-classes da linguagem de estilos. Elas servem, basicamente, para adicionar atributos e efeitos nos elementos presentes nas páginas e ocorrem quando o usuário posiciona o mouse sobre ele.
Com o CSS3, novas possibilidades para efeitos de transição nasceram, possibilitando a customização do código para designers UX que conseguem entregar um resultado altamente bom com códigos bem simples.
Os Hover Effects CSS são recursos amplamente utilizados para adicionar inúmeras funcionalidades em aplicações web, melhorando a experiência do usuário e isso você provavelmente já sabe.
Mas você conhece bem os benefícios do Hover Effects, os efeitos mais populares e os seus códigos?
Se não, você está no lugar certo! Continue a leitura e aprenda conosco.
O que é Hover Effect CSS?
Nós falamos, no tópico acima, sobre o Hover Effect CSS ser um tipo de palavra-chave que é usada pelas pseudo-classes da linguagem de estilos.
Mas, antes de darmos continuidade na sua definição, primeiro responda: você sabe o que são as pseudo-classes?
Em suma, elas são funções que possibilitam que sejam adicionados atributos a elementos quando ocorrem certos eventos. Por exemplo, sabe quando clicamos em um link e a cor daquele texto é modificada? Bom, isso ocorre graças às pseudo-classes.
O hover, por sua vez, é uma pseudo-classe que é identificada quando o usuário passa o mouse sobre algum elemento e, dessa forma, modifica as suas características, de acordo com o que foi atribuído no código CSS para essa circunstância.
O Hover Effect, no seu modo, são os efeitos que o hover pode proporcionar a página da web, como Fade In, Rotação, Borda e entre outros.
Para que serve o Hover Effect?
O hover, apresentado como :hover no código, ativa estilos em elementos quando ativado.
Serve para possibilitar que um elemento tenha seu estilo alterado por meio da ação de um usuário, normalmente quando o mesmo passa o cursor do mouse sobre o elemento.
O Hover Effect, que é o grupo de estilos em si, é muito utilizado no desenvolvimento web para adicionar diferentes funcionalidades com foco em interatividade em aplicações web.
Quais os benefícios de usar o Hover Effect CSS?
A melhoria e benefício foco do Hover Effect CSS é o aprimoramento da User Experience ou experiência do usuário em português.
Ou seja, como os efeitos possibilitam que sejam adicionadas animações, muitas vezes surpreendentes aos textos, imagens e links, o usuário consegue ter uma experiência diferente e melhorada, em comparação com outras páginas web.
Além disso, o Hover Effect CSS conta com infinitas oportunidades para adição de animações. Ou seja, com o uso da personalização que a função permite, você pode modificar as diferentes propriedades do seu elemento e criar algo só seu.
Tipos de Hover Effect CSS
Chegou a hora de conhecer os 8 Hover Effect CSS mais populares junto aos seus códigos. Vamos lá?
1. Fade in
O Fade In é muito popular entre programadores e desenvolvedores. Provavelmente porque ajuda na enfatização da função ou na hora de buscar a atenção para uma ação, muito comum em estratégias de marketing.
Esse efeito tem o seu código feito em duas partes:
- Defina o estado inicial;
- Defina a mudança, usando o seletor de evento hover, por exemplo.
.fade
{
opacity:0.5;
}
.fade:hover
{
opacity:1;
}
2. Mudança de cor
Durante muito tempo, mudar cores para uma div era absurdamente complexo, já que envolvia diferentes tipos de combinações relacionados ao cálculo de valores RGB de forma separada e, depois, recombinando-os.
Hoje, com o CSS, é possível definir, na classe, div como “color” e, em seguida, especificar a cor desejada.
.color:hover
{
background:#53a7ea;
}
3. Aumentar
Aumentar ou crescer, no Hover Effect CSS é grow.
Para aumentar o elemento desejado, antes era preciso usar a sua largura e altura ou, quem sabe, o seu preenchimento.
Com o CSS3, é possível transformar para ampliar de forma mais simples, veja as ações:
- Definir a classe da div para grow;
- Adicionar o código abaixo com valor maior que um para o scale (escala de tamanho do objeto);
.grow:hover
{
-xpedu-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
4. Encolher
Assim como aumentar é grow, encolher é shrink e, de fato, é super simples, assim como o código anterior.
No tópico acima, explicamos que para ampliar um elemento temos que colocar um valor maior que 1 para o scale. Seguindo essa lógica, para reduzi-lo, colocaremos um valor menor que 1:
.shrink:hover
{
-xpedu-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
5. Rotação
O efeito de rotação é simples, ou seja, é preciso que a div seja definida com a classe “rotate” e, em seguida, adicionar o seguinte código no CSS:
.rotate:hover
{
-xpedu-transform: rotatez(-30deg);
-ms-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}
6. Filter blur
Para adicionar o filtro de blur, ou seja, deixar a imagem mais desfocada, você precisa adicionar o seguinte div a sua imagem <div class=”blur”> e, sem seguida, colocar o seguinte código CSS:
.blur img
{
transition: 1s ease;
}
.blur img:hover
{
-xpedu-filter: blur(5px);
transition: 1s ease;
}
7. Arredondar
Transformar um elemento quadrado em redondo é um dos efeitos mais populares de Hover Effects CSS.
Como fazer? Simples: seu primeiro passo será definir sua div como classe “circle” e adicionar o seguinte:
.circle:hover
{
border-radius:50%;
}
8. Borda
A inserção de borda para destacar o conteúdo é outro efeito popular.
Para isso acontecer, é preciso utilizar a transição responsável por criar uma borda usando uma sombra de caixa embutida. Por isso, o seu primeiro passo será dar a sua div uma classe intitulada “border” e seguir com o código:
.border:hover
{
box-shadow: inset 0 0 0 25px #53a7ea;
}
<Leia também: Como desenvolver dark mode em CSS? Aprenda!/>
Como usar um Hover Effect CSS?
Em suma, o hover precisa ser utilizado após um seletor CSS. Esse seletor, por sua vez, pode ser um elemento (todos HTML), uma classe ou, quem sabe, um id.
Na prática, fica assim:
a:hover {
background-color: green;
}
A resumo do CSS, em suma, é:
seletor:hover {
propriedade: valor;
}
Como retirar o Hover Effect CSS?
Em suma, a remoção do hover é bem simples: insira ‘disabled‘ no elemento que está sendo utilizado e pronto!
<Leia também: Como linkar CSS no HTML de forma fácil/>
Qual o Hover Effect mais utilizado no front-end?
São diversos os Hover Effects CSS utilizados por desenvolvedores front-end, já que as possibilidades de criação são praticamente infinitas. Mas existem alguns que são principais, dado ao bom desempenho e baixa necessidade de processamento.
Os cinco principais são:
- Fade In;
- Mudança de cor;
- Crescer;
- Encolher;
- Rotação.
Qual a compatibilidade do Hover Effect CSS com os navegadores?
O :hover é suportado nos seguintes navegadores:
- Chrome 4.0;
- Mozilla Firefox 2.0;
- Edge 7.0;
- Opera 9.6;
- Safare 3.1.
Por que aprender a usar o Hover Effect CSS na sua interface?
Se você quer que o seu site alcance o sucesso, você precisa investir numa boa interface de UI e UX para garantir uma boa navegação para o usuário. Essa interface é a responsável por tornar elementos mais visíveis e claros de serem vistos. Além disso, o Hover Effect é um elemento de design que, muito provavelmente, ajudará na usabilidade do seu website.
Curtiu o que leu, quer aprender mais sobre e, além disso, deseja entrar nas empresas mais inovadoras do mercado? Bom, você está no lugar certo! Para alcançar o sucesso na área da tecnologia, você precisa estar constantemente capacitado. Por isso, conheça Bootcamp de Desenvolvedor Front-End da XP Educação e aprenda!
