Ajuda com link com imagens

Plábyo Rainer Gianniany · Abril 12, 2012

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.

JaguA · Abril 12, 2012

é 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)
}

Plábyo Rainer Gianniany · Abril 13, 2012

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>

</head>

<body>

<ul>

<li class=youtube><a href="#">Youtube</a></li>

</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;}

JaguA · Abril 13, 2012

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...

Plábyo Rainer Gianniany · Abril 13, 2012

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.

JaguA · Abril 13, 2012

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 ...

Ricardo T. do Prado · Abril 15, 2012

vamos lá, bem simples:

hml

<a href="#"> <img class="hover" src="facabook_preto_branco.jpg /> </a>

css

.hover {
background:url(facebook_normal) no repeat;
}

img {

border:none; /*hack para IE*/

}

Abs.

Editado Abril 15, 2012 por Ricardo T. do Prado

Entrar

Ajuda com link com imagens

Pergunta

Plábyo Rainer Gianniany

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

JaguA

Link para o comentário

Compartilhar em outros sites

Plábyo Rainer Gianniany

Link para o comentário

Compartilhar em outros sites

JaguA

Link para o comentário

Compartilhar em outros sites

Plábyo Rainer Gianniany

Link para o comentário

Compartilhar em outros sites

JaguA

Link para o comentário

Compartilhar em outros sites

Ricardo T. do Prado

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades