css3 - How to give the webpage a light in the darkness effect using mouse cursor -

i'm interested in making effect of totally dark webpage (and in dark mean dark night without lights @ all) , give mouse cursor light effect light surrounding.
should use achieve kind of effect? i've tried looking answer in css , on web haven't found similar.
thing found this plugin wordpress it's fixed , can't customized or used.

i know old thread, interested in making effect myself, , whipped something on jsfiddle think accomplishes task.

the code @ jsfiddle, , copied here explanations. pretty simple.

html

i created div id light, used wrapper div, called content, containing lorum ibsum.

<div id="light"></div>  <div class="content">       <h1>flashlight test</h1>        <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>     <ul>         <li>lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>         <li>aliquam tincidunt mauris eu risus.</li>         <li>vestibulum auctor dapibus neque.</li>     </ul>     <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo.</p>  </div> 

css

i styled html element, top level element on page, have black text , black background, hidden default.

next styled div light id. made mine 100px high , 100px wide, made background yellow, , gave border-radius of 50px, half width/height, making circle. made div position: relative, it's taken out of normal page flow, , can lay on top of other elements, important layering need create effect. decided throw in default position flashlight, before user moves mouse (more on in js section), set top , left properties 50%, centers on page.

finally, added rules content wrapper div, setting position: relative , z-index 10. position: relative or position: absolute needed z-index work; z-index controls elements stack on top of which. setting content div, namely text, higher z-index, makes appear on top of light div, can see because of lighter background.

html {      color: #000;      background-color: #000;  }  .content {     position: relative;     z-index: 10; }  #light {     top: 50%;     left: 50%;     width: 100px;     height: 100px;     border-radius: 50%;     position: absolute;     background-color: rgb(231, 221, 122); } 

javascript

the js 6 lines, using jquery. set offset - position - of element using mousemove() event function. function has parameter holds coordinates mouse is. subtract 50 pixels number center light, , have effect.

$(document).mousemove(function(event) {     $('#light').offset({         top: event.pagey - 50,         left: event.pagex - 50     }); });