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

Ajuda com link com imagens


Plábyo Rainer Gianniany

Pergunta

Olá pessoal.

Procurei um fórum de css aqui e não encontrei, então criei aqui mesmo.

É o seguinte, eu estou querendo colocar umas imagens como link, e essas imagens são em preto e branco. Isso eu já consegui.

O que eu não estou conseguindo fazer é que quando o usuário passar o mouse na imagem ela apareça colorida, como nesse link: http://www.cifraclub.com.br/

No radapé da página vocês verão os ícones das redes sociais, eu quero fazer desse jeito ai.

Se alguém puder me ajudar fico grato.

Valeu.

Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0

é so você rola a barra um pouco mais para baixo

segue o link do forum de CSS para tu ver...

http://scriptbrasil.com.br/forum/index.php?showforum=4

quanto ao que você quer fazer não é dificil

estude um pouco sobre

hover

no seu kso muito simples

vamos supor que a imagem esteja dentro de uma li que está dentro da uma ul ficaria assim.

HTML

<ul>
<li class="face"> Facebook </li>
<li class="tube"> Youtube </li>
</ul>
CSS
.face {
background: url(images/icons/black/face.png)
}

.face:hover {
background: url(images/icons/color/face.png)
}


.tube {
background: url(images/icons/black/youtube.png)
}

.tube:hover {
background: url(images/icons/color/youtube.png)
}

Link para o comentário
Compartilhar em outros sites

  • 0

Não funcionou.

A imagem até apareceu, mas quando eu passo o mouse sobre ela não acontence nada.

Abaixo segue o código que testei.

index.html

<html>

<head>

<title>Link com Imagens</title>

<link href="style.css" type="text/css" rel="stylesheet"/>

</head>

<body>

<ul>

<li class=youtube><a href="#">Youtube</a></li><!--eu não quero esse nome ai, só a imagem, por isso acho que a imagem não pode ficar como background e deve ser inserida ai-->

</ul>

</body>

</html>

style.css

.youtube{background: url(icone_youtube.jpg); width:80px; height:80px; background-repeat:no-repeat;}

.youtube:hover{background: url(icone_youtube-black.jpg); width:80px; height:80px; background-repeat:no-repeat;}

Link para o comentário
Compartilhar em outros sites

  • 0

você não precisa repetir tudo no :hover

nele você so coloca o que deve mudar no seu kso o Background

exemplo

.youtube {

background: #000000;
color: F00;

}

.youtube:hover {

color: #FFF;

}

da forma que tah aqui está funcionando normalmente...

Link para o comentário
Compartilhar em outros sites

  • 0
você não precisa repetir tudo no :hover

nele você so coloca o que deve mudar no seu kso o Background

exemplo

.youtube {

background: #000000;
color: F00;

}

.youtube:hover {

color: #FFF;

}

da forma que tah aqui está funcionando normalmente...

Cara, dessa forma ai funciona mesmo, mas com a imagem não dá certo.

A imagem do .youtube aparece, mas quando se passa o mouse não acontece nada.

Link para o comentário
Compartilhar em outros sites

  • 0

velho você vai utilizar 2 imagens

uma imagem preto e branco

e a outra colorida

quando for o hover

tu poem a colorida

ou se você já tiver conhecimento de manuzear posição

pode por 1 uncia imagem com o simbolo colorido e preto no branco e depois so dar as positions ...

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
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...