View Full Version : CSS Opacity Problem

10-31-2007, 04:48 PM
Hi, I'm mixing a bit of javascript and CSS together, and what I've got it doing is, when you click on the image of the page, it brings up the enlarged image in the middle of a solid-color div. You click on the image to get the full size and the div to disappear. However, I want the div itself to be somewhat transparent, so I've set it's opacity to .5 (I know this doesn't work on IE, and you need the alpha thingy). I then set the image opacity to 1 and the text opacity to 1 as well. But when I click on the image, everything in the div is .5 transparent and not opaque.

Here's the code:

position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
padding: 3em;
opacity: .5;
background-color: rgb(220, 8, 21);
z-index: 1;

#divId img
margin: auto;
z-index: 1;
opacity: 1;
display: block;

And then the text also has it's opacity set to 1.

Here's the URL for those who want to see what it does: http://z.cs.utexas.edu/users/cs329e/kaujot/project/movies/ivans_childhood.html

Right now the script only works in Firefox.

Thank you so much.

10-31-2007, 05:06 PM
If the opacity for the #divId is set to .5, it will apply that opacity to everything contained inside of it, including text, images, and other divs. Annoying, but it does. I have yet to find a way to get around it. :/