Creating a Dynamic Mouse Hole Overlay Effect with Feathered Edges Using jQuery and CSS

The mouse cursor is an essential element in web design that can significantly enhance user interaction. In this tutorial, we will create a unique and engaging mouse effect: a dynamic "mouse hole" overlay that follows the cursor and reveals the background image underneath it. This effect is particularly useful for creating interactive hero sections or promotional banners on your website. We'll use HTML, CSS, and jQuery to bring this effect to life.

Understanding the Code Structure

The structure of this effect is simple, yet powerful. We will create a hero section with a background image covered by a color overlay. A circular hole will be cut out of the overlay, following the mouse movement and revealing the image underneath. To make the effect more visually appealing, the circle will have feathered edges.

Figure 1: The background image used in the hero section.

HTML Structure

Let's start with the HTML structure. We have a simple hero section that contains the background image, an overlay, and a circle that will follow the mouse cursor.

<div class="hero-section-box">
    <div class="color-overlay"></div>
    <div class="circle-hole"></div>
</div>

The .hero-section-box is the main container holding the background image. Inside it, we have a .color-overlay that covers the entire section with a semi-transparent color, and a .circle-hole which is the dynamic circle revealing the background.

Figure 2: The hero section with the color overlay applied.

CSS for Styling

The CSS is responsible for the visual appearance of our effect. We set up the background image, color overlay, and style the circle to have a feathered edge.

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.hero-section-box {
    position: relative;
    background-color: rgba(145, 211, 255, 1);
    width: 100%;
    height: 100vh;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxXuKwPwfJ_RSPy0zlXpnOUbpLZlIhuSMOEX2gabexgB_r1X7GnRV3rHbENDCqRmoiV5QWtlS9IXHORK_Y5KResx_Dq5DM5FNZP5dGPjXNl5kjFpBOyD3w1wxXpzaZLwC6szyUOC1na_bR2uebfWybD0Q5ZCHu_A96SH2jjwyiQ9e7GG4DQYQh89mQiB4/s1600/Group%201321314466%20%281%29.png');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.color-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(145, 211, 255, 0.85);
    pointer-events: none;
}

.circle-hole {
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(145, 211, 255, 1);
    background: radial-gradient(circle, rgba(145, 211, 255, 0) 40%, rgba(145, 211, 255, 0.7) 80%);
}

Here, the .circle-hole is styled with a radial gradient to create the feathered edge effect. The box-shadow ensures that only the circle is transparent while the rest of the overlay remains opaque.

Figure 3: The circle hole revealing the background image with feathered edges.

Adding Interactivity with jQuery

To make the circle follow the mouse cursor, we use jQuery. The script listens for mouse movements within the hero section and updates the position of the circle accordingly.

$(document).ready(function() {
    var $circleHole = $('.circle-hole');

    $('.hero-section-box').on('mousemove', function(e) {
        var mouseX = e.pageX - $(this).offset().left;
        var mouseY = e.pageY - $(this).offset().top;

        $circleHole.css({
            top: mouseY - ($circleHole.height() / 2) + 'px',
            left: mouseX - ($circleHole.width() / 2) + 'px'
        });
    });
});

This script ensures that the circle hole always stays centered on the cursor, creating a smooth and engaging effect as the user moves the mouse around the screen.

Figure 4: The circle hole dynamically follows the mouse cursor across the hero section.

Conclusion

This mouse hole overlay effect is a great way to add an interactive element to your website, especially in hero sections where visual engagement is crucial. The combination of CSS for styling and jQuery for interactivity creates a smooth and visually appealing effect that enhances user experience. Experiment with different background images, overlay colors, and circle sizes to customize the effect to your liking.