Card Hover Effect in Elementor: Create Stunning Interactive Designs

Creating a visually stunning website is all about attention to detail, and card hover effects are an excellent way to add interactivity and polish to your designs. In this step-by-step tutorial, you’ll learn how to create an eye-catching glowing card hover effect in Elementor – without using any additional plugins. This effect is perfect for showcasing your skills in a portfolio or making your website more dynamic and engaging. Let’s dive in!

How to Add Glowing Card Hover Effects in Elementor: A Step-by-Step Guide

Adding glowing card hover effects to your website isn’t just about following trends; it significantly enhances user experience and website aesthetics. These effects draw attention to your content, improve interactivity, and make your design more engaging. With Elementor, you can create this effect easily, even without coding skills.

Step 1: Set Up Your Container

Start by opening Elementor and adding a container to your layout. Rename the container to something descriptive, like “Card Section,” for better organization. Add padding to the container to ensure proper spacing for your content.

Step 2: Style Your Cards

Create three containers within your main container to serve as individual cards. Change the layout from Column to Row to display the cards horizontally. Add padding and a border radius of 12px to each card to create a smooth, rounded appearance. Set the overflow property to hidden to ensure that the hover effect stays within the card boundaries.

Step 3: Structure Your Card Components

Each card should include three sub-containers: an inner container for the main content (icon, heading, and text), a glow container for the glowing animation, and a fake glow container for added depth. Assign descriptive classes like “inner,” “glow,” and “fakeglow” to make styling easier later.

Step 4: Add and Style Content

Place your card’s content, including an icon, heading, and text, inside the inner container. Style the content to match your website’s design while maintaining consistency across all cards. Make sure the inner container’s border radius matches the card’s border radius for a cohesive look.

Step 5: Define Background and Hover Colors

Set a background color and hover color for the inner container. Use RGBA values to create a sleek, layered effect. For instance, set the default background opacity to 0.8 and the hover opacity to 0.6 for a smooth transition effect.

Step 6: Add Animation with Custom CSS

To make the hover effect dynamic, add a custom CSS snippet. Navigate to the Advanced tab in the card container and paste the CSS code provided in your tutorial source. This snippet will define the glowing animation and ensure smooth transitions.

Step 7: Enhance with JavaScript

For additional interactivity, include a JavaScript snippet. Copy the script from your tutorial source and paste it into your website’s custom JavaScript section. Save your changes and preview the animation to ensure it works as expected.

Step 8: Customize the Hover Effect

Adjust the glow color by selecting a shade like red, yellow, or mint in the glow container settings. Fine-tune the intensity by modifying the hover color’s opacity. For a subtle glow, increase the opacity value; for a stronger effect, decrease it. For example, an opacity of 0.9 creates a subtle glow, while 0.6 results in a bolder effect. Modify padding as needed to adjust the card’s border thickness for a professional look.

Final Touches

Once your first card is styled, duplicate it to maintain consistency across your design. Customize each card’s content, glow color, and hover effect to add variety while preserving a uniform aesthetic. This approach ensures your website looks polished and professional.

Conclusion

Adding glowing card hover effects with Elementor enhances user experience, improves interactivity, and elevates your website’s design. Follow this guide to create visually engaging cards that grab attention and keep visitors exploring your site. Start experimenting with glow colors and animations today to make your website stand out!

Custom CSS Code


.card {
--blob-size: 250px;
}

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

.card .glow {
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;
}

.card .fakeglow {
visibility: hidden;
z-index: -1;
height: 100%;
}

JavaScript Code


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

window.addEventListener("mousemove", (ev) =&gt; {
  cards.forEach((e) =&gt; {
    const glow = e.querySelector(".glow");
    const fakeglow = e.querySelector(".fakeglow");
    const rec = fakeglow.getBoundingClientRect();

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

    glow.style.opacity = "1";
  });
});

Related Tutorials

How to Make an Awesome Slider in Elementor Pro

How to Create an Animated Menu in Elementor Without Extra Plugins

MIND-BLOWING Elementor Scrolling Effects You Need To Know

How to Highlight Text on Scroll Twice in One Page with Elementor and GSAP

How to Create a 3D Image Slider in Elementor (No Pro Needed!)

How to Create a Blurry Text Animation Effect in Elementor (No Pro Required!)