Jump to content


Photo

Efeito De Opacidade Ao Passar O Mouse


  • Faça o login para participar
4 replies to this topic

#1 KrZ

KrZ

    =)

  • Usuários
  • 259 posts
  • Sexo:Masculino
  • Localidade:Home

Posted 24/10/2007, 12:41

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
Nome: Rodrigo C. Santos
Blogs/Sites: www.rodrigokrz.com - www.logandoti.com

#2 Kadu DG

Kadu DG

    I Love my Little Girl! http://www.kdsg.net

  • Usuários
  • 597 posts
  • Sexo:Masculino
  • Localidade:Carapicuiba, SP

Posted 24/10/2007, 15:15

vc pode fazer assim:

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:
Posted Image

um exemplo vc tem aqui:
http://www.kdsg.net/js.html

Edição feita por: Kadu DG, 24/10/2007, 15:17.

Posted Image

#3 KrZ

KrZ

    =)

  • Usuários
  • 259 posts
  • Sexo:Masculino
  • Localidade:Home

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

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.

Nome: Rodrigo C. Santos
Blogs/Sites: www.rodrigokrz.com - www.logandoti.com

#4 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 13201 posts

Posted 05/11/2022, 17:46

ivermectin stromectol Beham A, et al

#5 JeffMalm

JeffMalm

    Super Veterano

  • Usuários
  • 12254 posts
  • Sexo:Feminino
  • Localidade:Mount Carey

Posted 02/12/2022, 15:39

cheap generic cialis In MCF 7 cells the apoptosis rate decreased from 23




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq