Question

I’d like to implement a similar effect as the one on codeacademy (http://www.codecademy.com/) when the user clicks the get started button. So basically focus on a single div and shade out the rest of the page.

I am not asking for code but for the method. I’ve tried to change the opacity of the rest of the page except from the div I want to focus on but with no success.

Answer 1

This is the css

.dimmer {
   background-color: #000;
   opacity: 0.4;
   z-index: 999;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   display: block;

}

#frame-that-does-not-dim {
   z-index: 99999;
}