[Resolvido] Problema com efeito "filter:alpha(opacity=0);&#34

[Bruno Batista 3]

Primeiramente feliz ano novo a todos do fórum, grandes amigos do dia a dia.

 

Clique aqui para acessar o site (Obs.: Favor abrir no Internet Explorer 6, estou com um problema chato de efeito alpha).

 

 

ie6.css

 

body {
.extra-box {
zoom:1;
}
.jcarousel-skin-tango {
right:-1px;
}
#footer .footer-links ul {
margin-top:6px
}
#footer .top img {
margin-top:0;
}

 

Overlay

 

/* full overlay */
.full_overlay {
float:left;
position:relative;
}
.full_overlay li {
width:245px;
height:184px;
}
.full_overlay .content {
position:absolute;
left:0px;
width:245px;
height:184px;
filter:alpha(opacity=0);
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
background:#000000;
background:rgba(0,0,0,0.8);
-webkit-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
transition:opacity 0.4s ease-in-out;
}
.full_overlay:hover .content {
filter:alpha(opacity=100);
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.full_overlay h2 {
font-size:16px;
padding:10px;
color:#fff;
}
.full_overlay p {
color:#fff;
line-height:16px;
padding:0 10px;
text-transform:none;
font-weight:700;
}
.full_overlay strong {
line-height:16px!important;
color:#99cc66!important;
}
.full_overlay .top {
top:0px;
}

 

Alguém poderia me dar a solução para esse problema?

 

Desde-já agradeço!

 

Se remover:

 

"filter:alpha(opacity=0);" da classe ".full_overlay .content {"

 

Ele mostra mais sem efeito...

[Evandro Oliveira 331]

Não trabalhe com opacity, pode lhe trazer efeitos indesejados nos elementos herdados. Prefira desenhar overlays com planos de fundo semitransparentes como está fazendo em rgba.

 

A alternativa para IE é o gradient transition:

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#cc0000', EndColorStr='#cc0000');

 

Para a sua necessidade, StartColorStr e EndColorStr devem possuir o mesmo valor, sendo este #[alpha][red][green][blue] em hexadecimal.

 

Para o Alpha, você deverá fazer a conversão de 100 para 255 - via regra-de-três - e depois converter para Hexadecimal.

 

No seu caso ficaria:

 

255 * .8 (80% de alpha) = 204 => CC

 

#CC000000

 

.full_overlay .content {
       position:absolute;
       left:0px;
       width:245px;
       height:184px;
       filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#000000', EndColorStr='#000000');
       opacity:0;
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
       background:#000000;
       background:rgba(0,0,0,0.8);
       -webkit-transition:opacity 0.4s ease-in-out;
       -moz-transition:opacity 0.4s ease-in-out;
       -o-transition:opacity 0.4s ease-in-out;
       transition:opacity 0.4s ease-in-out;
}

[Bruno Batista 3]

Muito obrigado, ajudo bastante.

[AlessandraSantos 0]

Olá,

Estou com um problema parecido. Em http://ocainteriors.com/teste/?category_name=park-ave-sd, para a pessoa rolar a página horizontalmente, é só posicionar o cursor à esquerda ou à direita, não é para aparecer nenhuma seta, nada. Porém, no IE8 aparece esses quadros que não estou conseguindo colocar opacity e se tiro a background-color a rolagem para de funcionar no IE8. Podem me ajudar?