Ajuda com link com imagens

Plábyo Rainer Gianniany · April 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 · April 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 · April 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 · April 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 · April 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 · April 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 · April 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.

Edited April 15, 2012 by Ricardo T. do Prado

Sign In

Ajuda com link com imagens

Question

Plábyo Rainer Gianniany

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

JaguA

Link to comment

Share on other sites

Plábyo Rainer Gianniany

Link to comment

Share on other sites

JaguA

Link to comment

Share on other sites

Plábyo Rainer Gianniany

Link to comment

Share on other sites

JaguA

Link to comment

Share on other sites

Ricardo T. do Prado

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity