image transparency help

[jltjr]

I'm having a problem with the images taking the opacity from the wrapper div. Could someone bale me out of this one? You can view the site here:jltjr(dot)com/studiocarvel/ My wrapper css follows ~Thanks, JT

.wrapper{
width:960px;
margin:0 auto;
background-color:#000033;
line-height:1.5em ;
padding:15px 3px 15px 15px;
left:50%;
right:50%;
-moz-opacity:0.90;
-khtml-opacity:0.90;
-webkit-opacity:0.90;
filter:alpha(opacity=90);
opacity:0.75;
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.8);
-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.8);
-khtml-shadow: 0 15px 20px rgba(0, 0, 0, 0.8);
border-top:1px solid #181001;
border-left:1px solid #181001;
border-right:1px solid #181001;
border-bottom:1px solid #181001;
background-color: #000033;
background-image: -webkit-gradient(linear, left top, left bottom, from(#000033), to(#000000));
background-image: -webkit-linear-gradient(top, #000033, #000000);
background-image: -moz-linear-gradient(top, #000033, #000000);
background-image: -ms-linear-gradient(top, #000033, #000000);
background-image: -o-linear-gradient(top, #000033, #000000);
background-image: linear-gradient(top, #000033, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000033', EndColorStr='#000000');
border-radius: 15px; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px;
-moz-background-clip: padding; 
-webkit-background-clip: padding-box; background-clip: padding-box;	
}

[hericles]

Does setting the opacity back to 1 for the CSS of the image not help? It will be inheriting the wrapper styles so you need to set them back to normal.

[jltjr]

Does setting the opacity back to 1 for the CSS of the image not help? It will be inheriting the wrapper styles so you need to set them back to normal.

I tried a few scenarios with that option. Neither worked. Thanks for your try at it.

[macneato]

This is how I would think of it. You applying opacity to the wrapper (e.g 0.75) which all children will inherit as they belong to a transparent parent. Probably not the easiest solution, but will definitely work.

Remove the following from the wrapper (opacity, gradient, background ect. -basically all the stuff you want to be transparent). Add that to a new class (ensuring the z-index is lower than your default content). Now add a div with the class inside of wrapper

[jltjr]

...Remove the following from the wrapper (opacity, gradient, background ect. -basically all the stuff you want to be transparent). Add that to a new class (ensuring the z-index is lower than your default content). Now add a div with the class inside of wrapper

I tried it and I lose "in the spot light photos and the artist pics" I played with the z-dex and could not get it right. All these images are canceling each other. Check out jltjr(dot)com/studiocarvel/

Maybe someone can spot something I'm missing.

[jltjr]

I thought it might be an easy fix. I guess I fooled myself :)

[jltjr]

I thought it might be an easy fix. I guess I fooled myself :)

I posted this thread on another HTML5/CSS3 forum. If I get a fix, I'll update this forum.