Texto em imagem com modo hover
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1 • Compartilhe
Texto em imagem com modo hover
Detalhes da questão
Endereço do fórum: http://recursosescolares.foruns.com.pt/
Versão do fórum: PunBB
Descrição
Olá!
Como posso criar um widget no fórum com as seguintes características: Uma imagem em forma de circulo com um efeito hover mas em texto? Ou seja quando passar o rato conseguir visualizar o texto. Já andei aqui de volta e sempre que tenho ou não fica a imagem ou fica apenas a imagem.
Obrigada
Re: Texto em imagem com modo hover
Olá!
Você se refere ao efeito tooltip?
E qual seria o texto?
Até mais.
Fraise
Você se refere ao efeito tooltip?
E qual seria o texto?
Até mais.
Fraise
Re: Texto em imagem com modo hover
Olá! Sim, exato! O texto é uma apresentação dos administradores do fórum. Como Nome, idade, Localização, curiosidade!
Mil obrigadas ^^
Mil obrigadas ^^
Re: Texto em imagem com modo hover
Seria este o eff que vc desejava?:
hover:
Se for adiciune os seguintes codes:
Espero ter ajudado ^^
hover:
Se for adiciune os seguintes codes:
- CSS:
- Código:
.perfilstaff {
display: inline-block;
position: relative;
}
.perfilstaff a {
display: block;
position: absolute;
width: 140px;
height: 180px;
background-color: #FFFAFA;
background-size: 100px;
opacity: 0;
font: 11px trebuchet ms;
color: #111111;
padding:10px;
text-align:center;
text-decoration: none;
-webkit-transition: all .3s; transition: all .3s;
}
.perfilstaff a:hover { opacity: 0.6; background-position: 95% 85%; }
.perfilstaff y {
color:#E32636;
font: bold 12px trebuchet ms;
}
.perfilstaff x {
color:#111111;
font: bold 11px trebuchet ms;
}
- Widget:
- Código:
<div class="perfilstaff">
<a href="link do perfil"><br /><y>Nome:</y><x>Texto</x><br /><br /><y>Idade:</y><x>Texto</x><br /><br /><y>Localização:</y><x>Texto</x><br /><br /><y>Curiosidade:</y><x>Texto</x></a><img style="width: 160px; height: 200px;" src="url_da_sua_img" />
</div>
Espero ter ajudado ^^
Re: Texto em imagem com modo hover
Sim ajudou! MUUUUITO OBRIGADA!
Re: Texto em imagem com modo hover
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas". |
Tópicos semelhantes
» Informações em modo hover
» Tirar modo hover
» Categoria modo hover
» Sub-fórum em modo hover
» Categorias em modo hover
» Tirar modo hover
» Categoria modo hover
» Sub-fórum em modo hover
» Categorias em modo hover
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos