How to create a shining / glowing effect around the cursor on mouse hover over a div? Glassmorphism Tutorial

Hello folks, in this post, we will explore how can you create an effect like this using HTML, CSS and JS.




The simple logic

Just replace the "divname" in the code by the name given to the div to that you want to apply this hover effect. We will use jQuery. So firstly, import this line:


<!-- paste this line either in the 'title' tag or at the end of body -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />




//JS part
document.getElementById("divname").onmousemove = e => {
	const divname = document.getElementById("divname")
    const rect = projects.getBoundingClientRect(),
    	x = e.clientX - rect.left,
    	y = e.clientY - rect.top;

	projects.style.setProperty("--mouse-x", `${x}px`);
    projects.style.setProperty("--mouse-y", `${y}px`);
};

The CSS (playing with logic)

Now we will add some css to make this effect working.



/* CSS part -- this is the most important part to show the effect */
#divname::before {
    content: '';
    opacity: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    /* background: white; */
    top: 0;
    left: 0;
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y), 
        rgba(255, 255, 255, 0.1),
        transparent 40%);
    transition: .5s all;
}
#divname:hover::before {
    opacity: 1;
}

Complete Code

Now I will show you how you can make the same thing as I showed you in the preview.

HTML part:


<!-- This is the html of the preview -->

<html lang="en">

<head>
    <meta charset="UTF-8"></meta>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Hover glow effect</title>
    <link href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" rel="stylesheet"></link>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"></link>
</head>

<body>
<section id="skills">
        <div class="character">
            <img src="Assets/Images/AREmoji_20220823_102301_38219.gif" alt="Shivesh Tiwari">
        </div>
        <div class="skills-container">
            <h1>Skills</h1>
            <br /><br />
            HTML/CSS
            <div class="skill-meter">
                <div class="skill-reading skill-reading-transition" id="html" style="width: 100%;"></div>
            </div>
            <br />
            React JS
            <div class="skill-meter">
                <div class="skill-reading skill-reading-transition" style="width: 70%;"></div>
            </div>
            <br />
            JavaScript
            <div class="skill-meter">
                <div class="skill-reading skill-reading-transition" style="width: 90%;"></div>
            </div>
            <br />
            UI/UX
            <div class="skill-meter">
                <div class="skill-reading skill-reading-transition" style="width: 85%;"></div>
            </div>
        </div>
    </section>
</body>
</html>



/* add this css to the html */
* {
    margin: 0%;
    padding: 0%;
}
body {
    /* font-family: "Poppins"; */
    background: var(--default-theme);
    /* background: black; */
    overflow-x: hidden;
	font-family: 'Montserrat', sans-serif;
	min-height: 100vh;
}
section {
    min-height: 100vh;
    width: 100%;
    position: relative;
    z-index: 1;
}
#skills .character img {
    height: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
}
#skills .skills-container {
    color: var(--dark-text-color);
    width: 30%;
    height: auto;
    padding: 2rem;
    /* background: red; */
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(0,-50%);
}
#skills .skill-meter {
    width: 100%;
    height: .7rem;
    background: white;
    border-radius: 1rem;
    margin-top: .6rem;
    padding: .1rem;
}
#skills .skill-meter .skill-reading {
    background: #4e33a4;
    height: 100%;
    border-radius: 2rem;
    transition: 5s linear;
}
#skills {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--dark-text-color);
    /* animation: 10s shape_color linear infinite; */
    backdrop-filter: blur(10px);
    background: rgba(74, 255, 165, 0.1);
    box-shadow: 0 25px 45px rgba(0,0,0,0.1);
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
#skills::before {
    content: '';
    opacity: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    /* background: white; */
    top: 0;
    left: 0;
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y), 
        rgba(255, 255, 255, 0.1),
        transparent 40%);
    transition: .5s all;
}
#skills:hover::before {
    opacity: 1;
}

That's all for this post, see you in the next.

0 Comments