Menu - CSS

Z

zezito95

Membro
Olá, sou novo aqui. Estou a deparar me com um problema que deve ser muito simples de resolver mas sou aprendiz na programação.
É o seguinte, tenho a página e o menu é apenas imagens e queria colocar um efeito em que ao passar o rato por cima de cada imagem aparece-se o texto em baixo com o nome do menu.
O html está assim:
<div class="menu">
<ul>
<li><a href="sobre.html"><img src="Imagens/sobre.png"/> <p class="sobre"> Sobre </p></a></li>
<li><a href="portefolio.html"><img src="Imagens/portefolio.png"/> <p class="portefolio">Portefólio</p></a></li>
<li><a href="contacto.html"><img src="Imagens/contacto.png"/> <p class="contacto"> Contactos</p></a></li>
</ul>
</div>

E o css está assim:

.menu ul {
margin-top: 24%;
margin-left:11%;
list-style:none;

}

.menu ul li {
display: inline;
width:87px;

}

.menu ul li a {
padding: 11%;
display: inline-block;

}

.sobre{
font-family: Helvetica, Arial;
display: none;
}
.portefolio{
font-family: Helvetica, Arial;
display: none;
}
.contacto{
font-family: Helvetica, Arial;
display: none;
}

.sobre:hover{
display:none;
}

.menu ul li a:hover {
cursor: pointer;
line-height: 20px;
color: #ffffff;

}

Que devo fazer?
 
Já experimentaste usar opacity em vez de display? Podes também adicionar controlo de transition para suavizar o aparecer do texto
 
LewisGM disse:
Já experimentaste usar opacity em vez de display? Podes também adicionar controlo de transition para suavizar o aparecer do texto
Clicar para expandir...

Se ele não usar SCSS não consegue. Como vai "buscar" o seguinte:

Faz :hover no li com a imagem, que está no mesmo li? Não consegues fazer opacity para o texto, sem tirar o opacity da imagem.

Uma alternativa, seria colocares o texto com a mesma cor do fundo e quando fazes hover na <li> ou mesmo no <img>, mudas a cor do texto para preto (não vi as cores que tens acima).

Usa um pouco de JavaScript/Jquery. Não sou expert mas podes colocar que ao fazer hover na imagem, podes alterar uma propriedade de CSS.

PS: tens ali na classe "sobre" tens no
Código: 
.sobre:hover{display: none;}
, mas deverias mudar para:

Código: 
.sobre:hover{display: block;}
 
É mais fácil mostrar do que explicar em cima:

https://jsfiddle.net/y3ex2fsq/

:D Agora depende de ti para interpretares o código. Metes novamente o HTML com o "endereço" onde tens as tuas imagens e acho que podes copiar o CSS.

Podes utilizar este "truque" de ter a mesma cor do fundo e do texto, e com o :hover, mudas apenas a cor do texto :). Simples.

Tem ali atenção ao hover, quando passas o rato em cima, a imagem sobe 1 ou 2px. Cabe a ti resolver :p

EDIT

Código: 
.sobre{
font-family: Helvetica, Arial;
display: none;
}
.portefolio{
font-family: Helvetica, Arial;
display: none;
}
.contacto{
font-family: Helvetica, Arial;
display: none;
}

É igual a isto :)

Código: 
.sobre, .portefolio, .contacto{
font-family: Helvetica, Arial;
display: none;
}
 
Obrigadíssima pela explicação. O :hover está a funcionar as letras aparecem na cor que quero. Esta a funcionar quase em pleno, mas continua um problema, as letras do menu estão continuamente a aparecer, ou seja a cor das letras é a cor do fundo mas elas saltam vêm-se à mesma.
 
em vez de mudares a cor das letras usa visibility:hidden e em :hover visibility:visible, tens ainda a vantagem de poderes animar a propriedade visibility para poderes dar um efeito de desvanecer
exemplo usand o fiddle postado em cima (com as modificaçoes que referi)
https://jsfiddle.net/y3ex2fsq/1/

ja agora a vantagem de usar classes e que podes dar a mesma classe a varios elementos principalmente quando partilham as mesmas propriedades, ou seja em vez de teres 3 classes (sobre, portfolio, e contacto) podias ter so uma
 
Cunha Esteves disse:
em vez de mudares a cor das letras usa visibility:hidden e em :hover visibility:visible, tens ainda a vantagem de poderes animar a propriedade visibility para poderes dar um efeito de desvanecer
exemplo usand o fiddle postado em cima (com as modificaçoes que referi)
https://jsfiddle.net/y3ex2fsq/1/

ja agora a vantagem de usar classes e que podes dar a mesma classe a varios elementos principalmente quando partilham as mesmas propriedades, ou seja em vez de teres 3 classes (sobre, portfolio, e contacto) podias ter so uma
Clicar para expandir...

Isto. Problem solved.

Como dito acima, tira o que tens de CSS no HTML e mete no ficheiro CSS.
 
Já corri o código todo, fiz as alterações mas continuo com o mesmo problema. As letras pernacem sempre, quando só quero que apareçam quando o mouse passa na imagem...
Mas obrigada por todas as dicas que têm dado
 
Já agora...
Em vez de usares div.menu usa antes a tag <nav>, assim dás "nome" às coisas.
Não metam medidas/ css no html.
E não é preciso fazer isto ".sobre, .portefolio, .contacto" nem isto ".menu ul li a:hover .sobre, .menu ul li a:hover .portefolio, .menu ul li a:hover .contacto".... bastava "nav ul li a p" e dava para todos.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo