HOVER OVER THE DIMMER SWITCH on the left to adjust the brightness of the “lightbulb.”
The “dimmer switch” is a div containing 101 “level” divs. Each is 2 pixels high and has a id numbered from id="level-00" through to id="level-100".
The lightbulb is a 100px by 100px div with border-radius:50px. It has a yellow background-color and a white inset box-shadow, added by means of a :before pseudo-element, to give it a default glow.
(The pseudo-element is needed because we'll be changing the box-shadow properties of the lightbulb div. Any new box-shadow styles we applied to it would override the default style. We could insert the default style into all the level div styles we’ll be creating, but that wouldn’t be very efficient. As it is, the :before pseudo-element won’t be affected by anything we do with the lightbulb.)
The basic idea of the demo is to hover one element but affect the style of another. This is easy enough to do with javascript, but it’s not too hard to achieve similar results with pure css. All we have to do is make sure the html is properly configured.
Specifically, since we can’t use css to affect an element higher up in the html than the element we are interacting with, we have to place the lightbulb div in the html so that it falls after all the dimmer switch divs.
With the html set up that way, we can use the general sibling selector (the ~ or tilde) to apply a new box-shadow style the lightbulb div when we hover over a level div:
#level-NN:hover ~ #light {
box-shadow:0 0 [some blur radius] [some spread distance] [some color];
}
Each of the 101 level divs will need its own :hover box-shadow style, with incrementally larger blur-radius and spreads. A typical sequence might look like this:
#level-60:hover ~ #light {
box-shadow:0 0 80px 60px white;
}
#level-59:hover ~ #light {
box-shadow:0 0 79px 59px white;
}
#level-58:hover ~ #light {
box-shadow:0 0 78px 58px white;
}
(The active pseudo-classes are there to help with touch devices.)
The specific initial values and increments are up to you and trial and error. I've left the x and y offset values at 0 throughout, but you could play with them and the shadow color for different effects.
For older browser compatibility, you’ll need to use vendor specific prefixes, or in the case of IE, the shadow or dropShadow filters. For IE9 and later, be sure to set border-collapse property to separate.