Efeitos de Hover em Círculos com CSS Transition
Neste post, vamos aprender a fazer efeitos usando a propriedade de raio de borda, com ela podemos criar formas circulares para criarmos alguns efeitos especiais ao passo o mouse sobre ao elemento.
Vamos começar passando alguns estilos comuns para nossos elementos conforme abaixo. Então, resetamos o body e o H1 que é o título do assunto, passando alguns estilos pra eles.
1° Passo:
*{
margin: 0;
padding: 0;
}
body{
background: #2c3e50;
color: #fff;
font-family: 'Open Sans', Arial, sans-serif;
}
.header h1{
font-size: 32px;
text-align: center;
padding: 20px 0;
}
2° Passo:
Vamos resetar a lista não ordenada UL + LI passando alguns estilos para os elementos.
.circulo{
list-style: none;
text-align: center;
}
.circulo li{
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
3° Passo:
Neste passo, vamos inserir as imagens em cada circulo passando o PSEUDO-CLASSES :nth-child(n) do CSS, passando o número para informar qual classe ( .circulo-item ) da LI queremos atingir.
.circulo li:nth-child(1) .circulo-item{
background: url(../images/1.png);
}
.circulo li:nth-child(2) .circulo-item{
background: url(../images/2.png);
}
.circulo li:nth-child(3) .circulo-item{
background: url(../images/3.png);
}
4° Passo:
Vamos agora estilizar a classe ( .circulo-item ) passando o CSS abaixo.
.circulo-item{
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 16px rgba(255,255,255,.6);
position: relative;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
}
5° Passo:
Vamos revelar a descrição aumentando-a e também animando a sombra da caixa de inserção do item. Então, vamos posicionar o item e definir uma sombra de caixa ( box-shadow ) passando o inset e uma transição (transition) CSS.
.circulo-item{
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 16px rgba(255,255,255,.6);
position: relative;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
}
6° Passo:
Vamos posicionar o elemento de descrição de forma absoluta para fornecermos um plano de fundo semitransparente definindo um valor RGBA. A opacidade ( opacity: 0; ) vai ser 0 e também vamos reduzi-lo usando a propriedade do CSS ( transform: scale(0); ) resetando o valor a 0:
.circulo-info{
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
background: rgba(63,147,147,.9);
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transform: scale(0);
-webkit-transform: scale(0);
opacity: 0;
}
7° Passo:
Vamos passar alguns estilos ao título do item que terá alguns preenchimentos ( padding ), margens ( margin ) e ( text-transform: uppercase; ) para deixar a fonte em caixa alta.
.circulo-info h2{
font-size: 22px;
text-transform: uppercase;
margin: 0 30px;
padding: 45px 0 0 0;
}
8° passo:
Deixaremos o elemento de parágrafo com ( opacity: 0; ) 0 de opacidade e uma transição, pois queremos desvedá-lo no hover, mas com um atraso.
.circulo-info p{
font-size: 14px;
font-style: italic;
border-top: 1px solid #eee;
padding: 10px 5px;
margin: 0 30px;
opacity: 0;
transition: all 1s ease-in-out 0.4s;
-webkit-transition: all 1s ease-in-out 0.4s;
}
9° Passo:
Passaremos alguns estilos para o link e faremos a cor ( hover ) amarela:
.circulo-info p a{
color: #eee;
display: block;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}
.circulo-info p a:hover{
color: #fff222;
}
10° Passo:
Agora, ao passar o mouse sobre a classe ( .circulo-item ) vamos atacar o ( :hover ) que irá animar o raio de propagação da sombra da caixa de 16px para 0:
.circulo-item:hover{
box-shadow: inset 0 0 0 0 rgba(255,255,255,.6);
}
11° Passo:
Agora, ao passar o mouse sobre a classe ( .circulo-item ), vamos atacar o ( transform: scale(1); ) passando o valor para 1 e a opacidade ( opacity: 1; ) passando o valor para 1. Assim revelando a classe ( .circulo-info ).
.circulo-item:hover .circulo-info{
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
12° Passo:
Agora vamos revelar o parágrafo da descrição com um atraso.
.circulo-item:hover .circulo-info p{
opacity: 1;
}
13° Passo:
Abaixo segue o HTML para o exemplo.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<title>Efeitos de Hover em Círculos com CSS Transition</title>
<meta name="author" content="HTML e CSS Pro" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<header class="header">
<h1>Efeitos de Hover em Círculos com CSS Transition</h1>
</header>
<ul class="circulo">
<li>
<div class="circulo-item">
<div class="circulo-info">
<h2>Criando Menu Deslizante</h2>
<p>
<span>Acesse no Blog</span>
<a href="https://www.htmlecsspro.com/artigo/criando-menu-deslizante-com-html-css-e-jquery" target="_blank">HTML e CSS Pro</a>
</p>
</div>
</div>
</li>
<li>
<div class="circulo-item">
<div class="circulo-info">
<h2>Sites Estáticos e Dinâmicos</h2>
<p>
<span>Acesse no Blog</span>
<a href="https://www.htmlecsspro.com/artigo/sites-estaticos-e-dinamicos" target="_blank">HTML e CSS Pro</a>
</p>
</div>
</div>
</li>
<li>
<div class="circulo-item">
<div class="circulo-info">
<h2>Termos e Definições do CSS</h2>
<p>
<span>Acesse no Blog</span>
<a href="https://www.htmlecsspro.com/artigo/termos-e-definicoes-do-css" target="_blank">HTML e CSS Pro</a>
</p>
</div>
</div>
</li>
</ul>
</body>
</html>
Veja o resultado final:
Veja o Vídeo dessa Aula no Canal do Youtube e se inscreva no Canal. Clique no sininho do Youtube para receber Notificações de novos Vídeos.
Assista aqui: https://goo.gl/eDgTs1