/    Sign up×
Community /Pin to ProfileBookmark

darking the page

Copy linkTweet thisAlerts:
Feb 20.2012

Hi,

I am building a car gallery.

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

Now I created the following element in the html code:

[code=html]
<div class=”big-picture-contianer” id=”big-picture-contianer”><img class=”big-picture” id=”big-picture” /></div>[/code]

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;
}[/CODE]

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?

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@hyperionXSFeb 20.2012 — Because [B]#big-picture[/B] has [B]position: absolute[/B], [B].big-picture-contianer[/B] has no height. Set it some height.
Copy linkTweet thisAlerts:
@programAngelauthorFeb 21.2012 — Because [B]#big-picture[/B] has [B]position: absolute[/B], [B].big-picture-contianer[/B] has no height. Set it some height.[/QUOTE]

OK thanks.

you are right.

I would also like to add that I have discovered that there is need to have the following css:
[CODE]html{
height:100%;
}
body{
height:100%;
}[/CODE]
×

Success!

Help @programAngel spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...