Efeito de borda em imagem quando mouse hover

[PauloRJ 4]

Gostaria de saber como fazer esse efeito de borda na imagem quando mouse tiver em cima (hover)

 

exemplo: www.globo.com/bbb as iamgens em destaque. Gostaria fazer este exemplo (não é flash)

 

imagem:

 

[Guilherme Rambo 4]

a:hover img {
display:block;
border:2px solid #06C;
}

[]'s

[PauloRJ 4]

valeu inside.

 

Mas olha, o efeito que voce me passou ele adiciona uma borda de 2px na imagem.

 

o efeito que msotrei ele faz o efeito da borda do tamanho da imagem para o centro.

 

se a imagem tem 150px ela vai continuar com 150px pq ele pega 2px de borda do tamanho para o centro entendeu?

 

 

como fazer assim?

 

POis desta forma q voce falou ele inclui borda = inclui tamanho

 

tenho 3 imagens de 150 = 450px = 2px de cada = 456px

quero manter o tamanho das imagens.

 

abraço

[brcontainer 16]

melhor fazer pelo tamanho da "lista" ou da TAG <A>

seria assim(TAG A):

 

a img {
display:block;
border:2px solid transparent;
}

a:hover img {
display:block;
border:2px solid #06C;
}

e diminua o tamanho das imagens

volte a postar se não resolver;)

[Giovani 104]

O link a seguir, o grande amigo pa_bruno, vai ajudar você:

http://www.brunodulcetti.com/blog/2007/06/...to-com-css.html

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Fesi 0]

Oie!

 

Vê se eh assim q você quer: http://www.fazendariopreto.com/fazenda.php

 

css:

.efeito img{
border: 2px solid #000;
}

.efeito:hover img{
border: 2px solid #fff;
}

[PauloRJ 4]

SHOW! Os 2 exemplos vao ser util. Fico grato http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

aproveitando, estou com um problema com lightbox poderia me ajudar?

é o seguinte:

 

estou desenvolvendo uma pagina na qual tem banner em flash e uso o lightbox para dar destaque as imagens

quando clica na imagem o jquery entra em ação e o flah nao é sobreposto pelo codigo.

 

Veja oq esta acontecendo -> http://www.paulorj.phx.com.br/teste/imgdestaque.html

 

nao cosnigo resolver!

 

fico no aguardo.

[Fesi 0]

Oie!

 

Aqui tah a resposta:

http://forum.imasters.com.br/index.php?showtopic=267665

[Fesi 0]

soh..que, esqueci de dizer..o problema q vai acontecer agora eh: você vai conseguir deixar o flash por baixo do efeito qd a foto eh aumentada, soh que qd você clicar na imagem e o efeito lightbox acontecer..o banner em flash vai desaparecer e só voltará a atuar novamente qd a imagem maior for fechada.

Se isso for um incômodo pra você posta de novo pq vou procurar o post de um cara q estava tentando resolver algo parecido e me deu umas dicas aí te passo..q agora não sei onde tah.

xau

[PauloRJ 4]

Fesi ajudou muito, funcionou perfeitamente com o seu codigo.

 

Mais uma duvida.

O dreamweaver CS ele cria outro codigo para arquivos .swf

que neste codigo nao funciona o "transparent" com isso o lightbox nao fica com o resultado do flash dentro do html.

 

com o seu codigo funcionou.

Alguma diferença e/ou beneficio ou nao de usar o codigo gerado pelo dreamweaver cs?

PS: Estou usando o seu (padrao "antigo") para o resultado esperado.

 

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','125','height','205','src','menu','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','menu' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"'>http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="125" height="205">
<param name="movie" value="menu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="menu.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="125" height="205"  wmode="transparent"></embed>
</object>
</noscript>

 

 

 

seu codigo

<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="642" height="650" id="flashfile">
<param name="movie" value="fesi.swf" />
<param name="quality" value="high" />
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="never" />
<embed src="fesi.swf" allowScriptAccess="never" allowNetworking="never" quality="high" width="642" height="650"
name="flashfile" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

Valeu atenção. http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

 

Fesi ajudou muito, funcionou perfeitamente com o seu codigo.

 

Mais uma duvida.

O dreamweaver CS ele cria outro codigo para arquivos .swf

que neste codigo nao funciona o "transparent" com isso o lightbox nao fica com o resultado do flash dentro do html.

 

com o seu codigo funcionou.

Alguma diferença e/ou beneficio ou nao de usar o codigo gerado pelo dreamweaver cs?

PS: Estou usando o seu (padrao "antigo") para o resultado esperado.

 

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','125','height','205','src','menu','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','menu' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"'>http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="125" height="205">
<param name="movie" value="menu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="menu.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="125" height="205"  wmode="transparent"></embed>
</object>
</noscript>

 

 

 

seu codigo

<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="642" height="650" id="flashfile">
<param name="movie" value="fesi.swf" />
<param name="quality" value="high" />
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="never" />
<embed src="fesi.swf" allowScriptAccess="never" allowNetworking="never" quality="high" width="642" height="650"
name="flashfile" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

Valeu atenção. http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Fesi 0]

Paulo dessa vez vou ficar te devendo..só o que posso afirmar é que com o código que te forneci você não conseguirá validar o html (http://validator.w3.org/#validate_by_input) que está usando por causa da tag embed.

Dá uma pesquisada nos links deste post e você entenderá melhor o quero dizer: http://forum.imasters.com.br/index.php...30&hl=flash

Qt ao código gerado pelo Dreamweaver, não sei informar a respeito. Mas os meninos do css aqui do Imaster concerteza te ajudarão nisso.

 

=)

[PauloRJ 4]

encontrei uma resposta sobre isso.

O java script é o da hora, mas o jquery escondendo o flah só consegui fazer funcionar com embed

 

Link do topico do assunto: http://forum.imasters.com.br/index.php?showtopic=171919

 

valeu! Topico fico maneiro.