Open In App

How to create a Spotlight Effect using HTML and CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 23 Feb, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads