How to create a Spotlight Effect using HTML and CSS ? - GeeksforGeeks

23 Feb, 2021
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('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png');    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 placeholderlet main = document.querySelector('.main_box');let mouse = document.querySelector('.mouse');  // Add an event listener for detecting// the movement of the mousemain.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('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png');            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:
CSS-Questions
HTML-Questions
CSS
HTML
JavaScript
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?