Card Hover Effect: Glowing Cursor Animation in Elementor (Step-by-Step Guide)

Learn how to create a glowing cursor card hover effect in Elementor using simple CSS and JavaScript. Step-by-step guide with code examples for a stunning interactive design.

Focus Keywords:

• Elementor card hover effect
• Glowing cursor effect Elementor
• Elementor CSS hover animation
• Elementor custom cursor effect
• Elementor tutorial

---

🧩 Introduction

Want to make your Elementor cards stand out with a beautiful glowing cursor hover effect? 🤩
This tutorial will show you step-by-step how to create a card hover animation with a glowing light that follows your cursor — all using Elementor, a little CSS, and JavaScript.

You don’t need any advanced coding knowledge. Just follow this simple guide and your cards will shine with a professional, futuristic glow!

---

⚙️ Step #1: Create the Section in Elementor

1. Open your page in Elementor Editor.
2. Add a new section.
3. Inside the section, add three inner containers — these will be your cards.
4. Set the layout direction to horizontal (row) under Flex controls.
5. Rename each container to “Container – Card” for better structure.

💡 Tip: You can duplicate containers to make more cards easily.

---

🧱 Step #2: Style the Cards

Inside each Container – Card:

1. Go to Advanced → CSS Classes and add:
   card
2. Add 1–3px padding (this will act as your card border).
3. Set Z-index: 0 and Overflow: Hidden.
4. Customize the Border Radius and Background Color of your card.
   • The background color acts as the default border color when not hovered.

---

🧍 Step #3: Create the Inner Container for Content

1. Inside each “Card” container, add a new inner container.
2. Label it ‘Inner Container’ (optional).
3. Add a CSS class name:
   inner
4. Add your card content (text, icon, image, etc.) inside the inner container.
5. Use flexbox to align and style the content.
6. Set:
   • Border Radius: same as outer card
   • Background Color: use 0.8 opacity
   • Hover Background: use 0.6 opacity for smooth transition

🪄 The slightly transparent background allows the glow to appear more naturally behind your content.

---

💡 Step #4: Add the Glow Effect Elements

Now, we’ll create the “glow” (blob) that follows your cursor.

1. Inside each Card container, add two more inner containers:
   • Blob Container
   • Fake Blob Container
2. Structure should look like this:Card Container
├── Inner Container
├── Blob Container
└── Fake Blob Container

3. Assign CSS classes:
   • Blob Container → blob
   • Fake Blob Container → fakeblob
4. In both:
   • Set Position: Absolute
   • Set Border Radius: 50%
5. For the Blob container:
   • Set Background Color = glow color (e.g., white, neon, or your brand color)
   • Remove any offset values in Horizontal/Vertical Orientation

🧠 The “Fake Blob” helps track cursor movement and positioning.

---

🎨 Step #5: Add Custom CSS

Go to the Advanced → Custom CSS section of your Card container and paste this code:

/* css goes in .card */

selector {
--blob-size:250px;
}

selector .inner{
backdrop-filter: blur(80px);
height: 100%;
}

selector .blob{
width: var(--blob-size);
height: 80%;
left: calc(50% - calc(var(--blob-size)/2));
filter: blur(40px);
z-index: -1;
opacity: 0;
transition: opacity 300ms 300ms linear;

}

selector .fakeblob {
visibility: hidden;
z-index: -1;
height: 100%;
}

🧠 How It Works:

• The --blob-size variable controls the glow size.
• The blur filter adds the glowing light effect.
• The blob sits behind the card (z-index: -1) and becomes visible on hover.
• Opacity 0 → 1 transition creates the smooth glowing animation.

---

⚡ Step #6: Add the JavaScript

Now we’ll make the glow move with your mouse.

You can add this code using the HTML widget in Elementor or under Custom Code:

<script type="text/javascript">

const cards = document.querySelectorAll(".card");

window.addEventListener("mousemove", (ev) => {

cards.forEach((e) => {
const blob = e.querySelector(".blob");
const fblob = e.querySelector(".fakeblob");
const rec = fblob.getBoundingClientRect();

blob.animate(
[
{
transform: `translate(${
(ev.clientX - rec.left) - (rec.width / 2)
}px,${(ev.clientY - rec.top) - (rec.height / 2)}px)`
}
],
{
duration: 300,
fill: "forwards"
}
);

blob.style.opacity = "1";

});

});

</script>

💬 This script tracks your mouse movement and animates the “blob” to follow your cursor in real-time, giving a glowing, interactive experience.

---

🧠 Quick Tips for Customization

• ✨ Change Glow Color:
  Change the background color of the .blob container.
• 💎 Make It Brighter:
  Reduce the opacity of your inner container’s hover background.
• 🌈 Add Borders:
  Increase the padding of your card container to simulate border thickness.
• ⚙️ Adjust Glow Speed:
  Change the duration value in JS from 300 to any number (e.g., 500 for slower motion).

🚀 Final Thoughts

You’ve just created an awesome glowing cursor hover effect for your Elementor cards!
This small detail can make your design look premium and interactive — perfect for portfolios, product showcases, or modern landing pages.

If you enjoyed this tutorial, share it or bookmark it for your next project.
Need a custom-designed website with effects like this?
👉 Hire me – I create stunning, interactive web experiences.