In this article, we are going to create a spotlight effect over the image when we hover over it. This is mainly based on HTML, CSS and JavaScript. The below steps have to be followed to create this effect.
HTML Section: In this section, we will create a container elements for the background image and the mouse pointer. The CSS and JavaScript files are also linked here.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="index.js"></script> </head> <body> <h1> Hover mouse over the image to get spotlight effect </h1> <div class="main_box"> <div class="img"></div> <div class="mouse"></div> </div> </body> </html> |
CSS Section: In this section, CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to the users. The browser effects are first reset, then the position and size of the image and mouse pointer are set. The filter property is used to give visual effects to the element. The clip-path property is used to convert the element into different kind of shapes.
CSS
/* Resetting the browser stylesheet */* { padding: 0; margin: 0; box-sizing: border-box; overflow: hidden; background-color: #000; color: #fff; } /* Styling the heading */h1 { display: flex; align-items: center; align-content: center; justify-content: center; } /* Position the mouse pointer and the background image */.main_box, .img, .mouse { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .main_box { cursor: none; margin-top: 3em; } .img, .mouse { background-image: url( background-size: cover; background-repeat: no-repeat; background-position: center; } /* Reduce the brightness of the image */.img { filter: brightness(10%); } /* Make a circle with the clip-path property for the spotlight in the effect */.mouse { clip-path: circle(5em at 0, 0); } |
JavaScript Section: This section handles the interactive portion of the webpage. It detects the mouse movement over the image using the offsetX and offsetY properties for getting the X and Y coordinates. The clipPath property is then used to create a circle for the spotlight effect.
Javascript
// Select the container box and the mouse placeholder let main = document.querySelector('.main_box'); let mouse = document.querySelector('.mouse'); // Add an event listener for detecting // the movement of the mouse main.addEventListener('mousemove', (e) => { // Use a circle with a clipPath // and the offsetX and offsetY property mouse.style.clipPath = `circle(10em at ${e.offsetX}px ${e.offsetY}px)`; }); |
Complete Code: It is the combination of above three sections of code.
HTML
<!DOCTYPE html> <html> <head> <style> /* Resetting the browser stylesheet */ * { padding: 0; margin: 0; box-sizing: border-box; overflow: hidden; background-color: #000; color: #fff; } /* Styling the heading */ h1 { display: flex; align-items: center; align-content: center; justify-content: center; } /* Position the mouse pointer and the background image */ .main_box, .img, .mouse { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .main_box { cursor: none; margin-top: 3em; } .img, .mouse { background-image: url( background-size: cover; background-repeat: no-repeat; background-position: center; } /* Reduce the brightness of the image */ .img { filter: brightness(10%); } /* Make a circle with the clip-path property for the spotlight in the effect */ .mouse { clip-path: circle(5em at 0, 0); } </style> </head> <body> <h1> Hover mouse over the image to get spotlight effect </h1> <div class="main_box"> <div class="img"></div> <div class="mouse"></div> </div> <script> // Select the container box and the // mouse placeholder let main = document.querySelector('.main_box'); let mouse = document.querySelector('.mouse'); // Add an event listener for detecting // the movement of the mouse main.addEventListener('mousemove', (e) => { // Use a circle with a clipPath // and the offsetX and offsetY property mouse.style.clipPath = `circle(10em at ${e.offsetX}px ${e.offsetY}px)`; }); </script> </body> </html> |
Output:
