how to add an overlay using jQuery +css?

Question

I want to show a container with overlay (mean black theme display on background) which displays slowly and displays in full after few seconds. So I used opacity property in that but it is not working for me.

I want to show the container slowly with black overlay using css.
here is jsfiddle: http://jsfiddle.net/g7Jj2/

#container{
    width:100%;
    opacity: 0;    
    -webkit-transition: opacity 2s;
}
.cc{
    opacity: 1;
}

Thanks

Answer 1

hope it will help you

  #container{
width:100%;
background:red;
height:100px;
opacity: 0;    
transition: opacity 2s ease;
-webkit-transition: opacity 2s ease;
}
 #container.cc{
opacity: 1;
  }

Demo

Answer 2

Demo: http://jsfiddle.net/g7Jj2/1/

Your CSS is being overridden due to specificity.
Use this instead:

#container.cc{
    opacity: 1;
}

Answer 3

try this:

.cc{
    opacity: 1 !important;
}

jsFiddle