I have a div "whitebox" which is basically a div that should cover my original "stimuli" div. It goes smooth and appears nicely, yet it does not cover the original div but seems to be transparent so that I can still see my original div though it. But I want it to be covered pletely.

Apparently 'opacity' does not fix it.

<div id="stimuli"> Just press B and get started... </div>

$("#whitebox").fadeIn("fast").delay(500).fadeOut("fast");

CSS:

#whitebox{
    background: #fc3a54;
    opacity: 1;
    position:absolute;
    height: 80%;
    width: 70%;     
}

Is there a simple trick to fix the transparency issue with my code above, or any other hints?

I have a div "whitebox" which is basically a div that should cover my original "stimuli" div. It goes smooth and appears nicely, yet it does not cover the original div but seems to be transparent so that I can still see my original div though it. But I want it to be covered pletely.

Apparently 'opacity' does not fix it.

<div id="stimuli"> Just press B and get started... </div>

$("#whitebox").fadeIn("fast").delay(500).fadeOut("fast");

CSS:

#whitebox{
    background: #fc3a54;
    opacity: 1;
    position:absolute;
    height: 80%;
    width: 70%;     
}

Is there a simple trick to fix the transparency issue with my code above, or any other hints?

• javascript
• jquery
• html
• css

• 1 May be easier for us if you add a jsfiddle of the problem in question. – 13ruce1337 Commented Apr 28, 2014 at 22:58
• so are you saying that despite opacity: 100%; the div is still slightly transparent? – Guy Commented Apr 28, 2014 at 23:03

2 Answers 2

try using an image with #fc3a54 colour instead of using the background function, you can then use z-index to insure your whitebox is in front

Are you positive #whitebox is covering #stimuli? Also, jQuery fadeIn and fadeOut will toggle the display property so if you start with an element that has display:none and run fadeIn on it it will show it. You can use fadeToggle (https://api.jquery./fadeToggle/) as well.