Ir para conteúdo
Fórum Script Brasil
  • 0

Imagem + Texto


LaisOliveira1

Pergunta

Olá, gente! Tudo bem? 

Preciso da ajuda de vocês com uma coisa.

Como faço pra colocar a imagem e quando passarem o mouse por cima dela, vir uma caixa com texto?

Preciso saber :( Qualquer ajuda é bem-vinda, viu?!

Não sei se é permitido disponibilizar contatos pessoais aqui (caso não for, por favor, não excluam o tópico, só me notifiquem mesmo)
mas meu skype é: viscondina

 

Bjs

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

- Olá, Boa noite.

- @LaisOliveira1, um exemplo rápido para fazer o efeito de revelar a legenda de uma imagem para apenas quando o usuário passar o mouse sobre a imagem.

- Segue o código em HTML anjo:

<div class="nome da sua class">
<a href="#">
    <img src="suaimagem.jpg" alt="nome da imagem" />
    <span class="mais">Saiba Mais</span>
    <span class="desc">
        <strong>Lorem Ipsum</strong>
        Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.
    </span>
</a>
</div>

- Segue o código que você precisar adicionar no seu CSS anjo:

.nome da sua class {
    margin: 0;
    overflow: hidden;
    float: left;
    position: relative;
}
.imgefeito a {
    text-decoration: none;
    float: left;
}
.imgefeito a:hover {
    cursor: pointer;
} 

- Estilização da imagem onde aparecerá o texto no estado hover, ou seja, quando o mouse estiver sobre a imagem.

.nome da sua class a img {
    float: left;
    margin: 0;
    border: none;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
} 

- Espero que ajude.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...