Bom, eu queria colocar o efeito de transparência no seguinte código:

Código:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src="/chatbox" id="chatboxpop" scrolling="yes" style="height: 350px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://irl-upload.com/u/1351181260.png" id="chatboxopen" style="display: inline; "><img src="http://irl-upload.com/u/1351181069.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>

Nessas imagens de abrir e fechar o chatbox retrátil, os botões ficarem com efeito de transparência, mas se possível, que mostre bem pouco, até aproximar o mouse em cima das imagens.
Ps.: Se possível, que deixe como editar a quantidade de transparência.

Substitua o código por este.

Código:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src="/chatbox" id="chatboxpop" scrolling="yes" style="height: 350px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://irl-upload.com/u/1351181260.png" id="chatboxopen" style="opacity: .3 !important; display: inline; "><img src="http://irl-upload.com/u/1351181069.png" id="chatboxclose" style="opacity: .3 !important; cursor: pointer; display: none; "></div></div>

Resulta?

Mas, eu quero que ele fique visível quando botar o mouse nele rsrs =S

Olá, depois de tentar diversas maneiras, eu constatei que o efeito só é possivel na imagem de abrir o chat, e a de fechar o char, tem o efeito hide, então o codigo não se aplica nela.

Adicione ao CSS.

Código:

.ca-ie:hover{opacity: 5!important;}

Substitua o WidGet.

Código:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src="/chatbox" id="chatboxpop" scrolling="yes" style="height: 350px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left">

<img src="http://irl-upload.com/u/1351181260.png" id="chatboxopen" class="ca-ie" style="opacity: .3; display: inline; ">

<img src="http://irl-upload.com/u/1351181069.png" id="chatboxclose" style="opacity: .3 !important; cursor: pointer; display: none; "></div></div>

Resulta?

Então ta certo. E Leandro, agradeço ter arrumado meu código de fundo lá no fórum =D