Hi,

I am building a car gallery.

Something very basic.
This is the link to it:
http://www.barzilaymor.co.il/car-gallery/index.html

Now I created the following element in the html code:
HTML Code:
<div class="big-picture-contianer" id="big-picture-contianer"><img class="big-picture" id="big-picture" /></div>
I gave it the following css:
Code:
.big-picture-contianer{
	display: none;
	background-color: #686868;
	opacity: 0.5;
	z-index: 500;
	width: 100%;
	
	}
#big-picture{
	position: absolute;
	top:30%;
	right:40%;	
	opacity:1;
	z-index: 7000;
	}
It is not displayed by default but I have javascript that change the display property to block.

What I try to do is that when you pressed on one of the car the whole screen become darker (that is why the color and the opacity of the big-picture-contianer's div), And the car is suppose to appear with not opacity at all, I gave it opacity of 1.

Instead I don't see at all the gray background, and the big car are transparent.

Where am I wrong in my css setting?