Efeito de foco incrível do ícone da fonte de cima para baixo
-
26-12-2019 - |
Pergunta
Estou usando Font Aewsome para meus ícones sociais, trabalhando com Bootstrap 3.
Quero um efeito de foco como este na parte inferior: exemplo
Eu tenho uma lista para meus ícones sociais:
<ul class="social-buttons">
<li class="youtube"><a href="#" title="Follow us on Youtube"><i class="fa fa-youtube fa-lg"></i></a></li>
<li class="twitter"><a href="#" title="Follow us on Twitter"><i class="fa fa-twitter fa-lg"></i></a></li>
<li class="xing"><a href="#" title="Follow us on Xing"><i class="fa fa-xing fa-lg"></i></a></li>
<li class="rss"><a href="#" title="Check out our RSS"><i class="fa fa-rss fa-lg"></i></a></li>
</ul>
Para meu CSS eu tenho isso:
.social-buttons {
position: absolute;
left: 70%;
top: 6px;
}
.social-buttons li {
list-style-type: none;
float: left;
margin: 9px 9px 9px 9px;
position: relative;
}
.social-buttons li a {
padding: 2px 2px 2px 2px;
display: block;
}
.social-buttons-footer {
position: relative;
left: -49px;
}
.social-buttons-footer li {
list-style-type: none;
float: left;
margin: 8px 8px 8px 8px;
}
.social-buttons-footer li a {
padding: 2px 2px 2px 2px;
display: block;
}
.fa-youtube, .fa-twitter, .fa-xing, .fa-rss {
color: #000000;
}
.fa-lg:hover{
color: #ffffff;
}
.fa-2x{
color: #000000;
}
.fa-2x:hover{
color: #ffffff;
}
// Hover Effect ---------------------------------------------------------------------------------------------------------------------------------------------
.youtube a:hover{
background-color: #db2c2c;
-webkit-animation: toBottomFromTop 0.3s;
-moz-animation: toBottomFromTop 0.3s;
animation: toBottomFromTop 0.3s;
color: #ffffff;
}
.twitter a:hover{
background-color: #83d0f5;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.xing a:hover{
background-color: #a2d123;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.rss a:hover{
background-color: #fe9c01;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
}
Pesquisei no Google nas últimas horas e só consegui encontrar exemplos onde usam sprites ou algo parecido.Eu realmente não sei como fazer isso.Onde devo colocar o ícone que deve ser trocado quando pairado?Eu sei fazer isso com sprites - aí eu uso a posição.Mas como faço para usá-lo aqui?Eu tentei outra coisa para o hover do YouTube:mas isso parece um grande bug!Alguém poderia me ensinar ou me dizer onde encontrar um tut?seria bom.
Solução
Eu criei o efeito que você precisa aqui no JsFiddle.
Você só precisa adicionar seus itens AwsomeFont agora.
Eu adicionei overflow: hidden;
para os pais e moveu os elementos únicos com margin: -x px 0 0 0
em um evento flutuante.