Estou fazendo um site institucional e é um tipo de agência de web-design, só que é mais pra aprender.
Então na HOME eu fiz vários bloquinhos com links para as páginas dos serviços. E em cada bloco minha intenção é fazer que ao passar o mouse por cima, apareça uma breve descrição antes do usuário clicar e ir até a página.
Eu consegui (em partes) fazer isso de duas maneiras (nas duas algo deu errado):
1º maneira - sobrepondo duas carreiras de blocos (a de cima com os ícones e títulos e a de baixo com as descrições) e quando passa o mouse em cima de algum bloco de cima ele muda o height
para 0%
fazendo aparecer o bloco com a descrição em baixo. Problema: qualquer movimento no mouse faz a classe sair do :hover
(logicamente porque o elemento some e o mouse sai de cima).
2º maneira - só uma carreira de blocos. desse jeito a minha intenção era fazer assim: o bloco está lá com o ícone e o titulo em forma de background-image
e a descrição lá (em texto dentro da div
) em display:none
, ai no :hover
o background-image
passa a ser none
e descrição vira block
. Problema Dessa maneira não deu certo; eu passo o mouse por cima da div e não muda o display, tentei com visibility
e também não funcionou. (deixei a parte em questão visível só pra galera ver mas tá comentado no código).
Da segunda maneira eu poderia fazer a descrição em forma de imagem, daria certo: apenas mudar o background-image
. Mas prejudicaria no SEO.
Também tentei com JavaScript e não consegui.