It’s simple really…
The text is black and the background is black, so you can’t see the text, it looks blank. However, when you hover your mouse over the page, a background image with a color of white follows your mouse, giving the illusion of a flashlight on the page!
Simply make an html page like this. Then give the page or a block a black background.
#black {
background-color: black;
}
Then give the element a background image, with the flashlight.jpg file.
#black {
background-color: black;
background-image: url(https://iwearshorts.com/flashlight/images/flashlight.jpg);
background-repeat: no-repeat;
cursor: crosshair;
}
That’s it! The jQuery just makes sure to track the mouse and move the background image along with it, this gives users the illusion that a flashlight is being shown over the text.
jQuery(document).ready(function() {
jQuery("#black").mousemove(function(e){
jQuery("#black").css('background-position',(e.pageX - 250)+'px '+(e.pageY - 250)+'px');
});
});
View the Demo.
This code dont work if add a background in someone element inside the body.
I’m not sure I understand. Although, I could tell you that if you add a background image on top of the flashlight png, it wont work.
Is it possible to put another BG image underneath it. I’ve tried several ways but all fail. For the work I’m trying to do I require the page to have its own background and for the light to be above the image.