bom pessoal, óia eu aqui pedindo um help again! XD
eu tow começando c um site novo, porem eu queria colocar um efeito nas imagens, eu queria q algumas imagens ficassem meio escuras, por exemplo, colocar a opacidade delas em 70%, e quando o visitante passasse o mouse em cima, a opacidade dela mudasse para 100%, ficando mais brilhante e visível.
Ja me disseram para criar duas imagens e colocar um java script para mudar a imagem quando o mouse passar em cima (facil de fazer com o FW), porem isso deixara o site mais pesado, e como as imagens estão na index, deixaria o site pesado, por exemplo, tem 3 imagens, fazendo da forma que me suugeriram, teria o dobro de imagens para serem carregadas.
eu gostaria de saber se há como fazer utilizando CSS.
ja sei criar o CSS mudando a opacidade da imagem "opacity", porem n sei se da para mudar de um estilo CSS para outro com mouse over, essa que é minha duvida... =/
alguem pode me ajudar?
Desde ja agradeço
Att, Rodrigo Cardoso
Efeito De Opacidade Ao Passar O Mouse
Started By KrZ, 24/10/2007, 12:41
4 replies to this topic
#1
#2
Posted 24/10/2007, 15:15
vc pode fazer assim:
a imagem em questão seria assim:
um exemplo vc tem aqui:
http://www.kdsg.net/js.html
a.srollover4 { display: block; width: 329px; height: 27px; background: url("../imagens/site/apresentacoes.jpg") 0 0 no-repeat; text-decoration: none; } a:hover.srollover4 { background-position: 0 -26px; }
a imagem em questão seria assim:
um exemplo vc tem aqui:
http://www.kdsg.net/js.html
Edição feita por: Kadu DG, 24/10/2007, 15:17.
#3
Posted 25/10/2007, 14:31
hum, assim, eu consegui fazer, mas tipo, acho q daria na mesma coisa do q criar duas imagens e colocar um java para substituir quando o mouse for passado em cima, pois eu teria que duplicar a altura da imagem.
eu conseguiu fazer de um modo diferente, usando hover tambem, mas mudando a opacidade da imagem, no FF funcionou direitinho, + no IE não funcionou =S
olhem o código
o IE que não aceita transparencia em links ou o meu código está errado ? o.O
vejam: http://www.counterstrike.r7web.com/
eu conseguiu fazer de um modo diferente, usando hover tambem, mas mudando a opacidade da imagem, no FF funcionou direitinho, + no IE não funcionou =S
olhem o código
a.imgtransparencia { opacity:0.65; -moz-opacity: 0.65; filter: Alpha(Opacity=65); } a:hover.imgtransparencia { opacity:1.00; -moz-opacity: 1.00; filter: Alpha(Opacity=100); }
o IE que não aceita transparencia em links ou o meu código está errado ? o.O
vejam: http://www.counterstrike.r7web.com/
Edição feita por: KrZ, 25/10/2007, 14:33.
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)