We help IT Professionals succeed at work.

lower lights

if you play any video in Hulu (http://www.hulu.com/) you had an very good feature called lower lights...
which makes everything dim except the video part....

I would like to know how to code such type of feature and I wanted to make a specific area glow and the remaining area dim....

can any one tell me how to approach to do it...
Comment
Watch Question

Anurag ThakurTechnical Manager

Commented:
tried to see the site but its not accessible outside US so couldn't see the implementation of dim lights
but my assumption is that when dim lights option is selected the CSS on the page is reapplied to do the effect of dimming lights on the page except to the video playing area

they are either using jquery or javascript

Author

Commented:
@ragi

so can you tell me how to write such...CSS....
Top Expert 2015
Commented:
I did this once simply by creating a div with a semi-transparent background that covered the entire page. I toggled the visibility when I needed it on. The "bright" element was in another div that I moved to the front using z-index. I remember it required that everything be positioned absolute. I may still have the files archived somewhere and I can try to dig them up. But seriously, if I did years ago when I was even more of a novice then I am right now, how hard could it be.
Most Valuable Expert 2011
Top Expert 2016
Commented:
Agree with tommyBoy on this one - use jQuery (google "jQuery") and you will find a JS+CSS thing that will do exactly what you want.  It may take some looking, but I am sure that the easiest implementation is in jQuery -- which does almost all of the special effects on Facebook.

Best regards, ~Ray
Jason C. LevineDon't talk to me.

Commented:
Yeah, it's not all that different from most "lightbox" jquery scripts out there.  The partially opaque background isn't loaded on first click, but only when Lower Lights is clicked.