Elementor Water Drop Card Hover Effect | Water Drop CSS (Free Code & Guide)

💧 Elementor Water Drop Card Hover Effect (CSS Only)

Want to spice up your Elementor cards with a stunning animation? In this tutorial, you’ll learn how to create a water drop hover effect using only custom CSS — no plugins or JS required.

Perfect for creative portfolios, UI/UX websites, or landing pages, this effect adds an elegant liquid ripple animation to your Elementor cards when hovered.

---

🧩 What You’ll Need

• ✅ Elementor Free or Pro
• ✅ Custom CSS (No extra plugin)
• ✅ A basic card/column section

---

🔧 Step-by-Step Tutorial: Water Drop Hover Effect in Elementor

1. Create Your Card Section

• Add a new section in Elementor.
• Insert a column and drag in a widget like Heading or Image.
• Style it like a card with padding, background, and border-radius.

2. Assign a Custom Class

In the Advanced tab, add this class:

water-card

3. Paste the CSS in Elementor

Go to your Page Settings → Custom CSS and paste:

.water-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 0 30px rgba(0,0,0,0.08);
}

.water-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.4) 20%, transparent 80%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease;
  border-radius: 50%;
  pointer-events: none;
}

.water-card:hover::before {
  transform: translate(-50%, -50%) scale(2);
}

💡 Result

Now when you hover over your Elementor card, a soft water ripple effect appears as if a drop hit the surface. Elegant, lightweight, and no JavaScript!

---

🌟 Customization Tips

• Change color: Adjust rgba(0, 170, 255, 0.4) for different water or neon effects.
• Size control: Modify width/height and scale() for stronger or subtle ripples.
• Add glow: Use box-shadow inside the radial gradient for glowing effects.

---

📦 Download Code

You can copy the full working code above or grab it as a downloadable .css file:
🔗 Download CSS File

Water Drop CSS #2

    selector{
        --card-shape: 48% 52% 58% 42% / 48% 25% 75% 52%;
        --card-hover-shape: 50%;
        --heading-shape: 50%;
        --heading-hover-shape: 61% 39% 38% 62% / 67% 49% 51% 33%;
        --heading-background: #eff0f4;
        --heading-circle-size: 80px;
        --bubble-color: #ffffff;
    }
    selector{
        box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05), 25px 35px 20px rgba(0,0,0,0.05), 25px 30px 30px rgba(0,0,0,0.05), inset -20px -20px 25px rgba(255,255,255,0.9);
        transition: 0.5s ease-in-out;
        border-radius: var(--card-shape);
    }
    selector:hover{
        border-radius: var(--card-hover-shape);
    }
    selector::before{
        content: '';
        position: absolute;
        top: 50px;
        left: 85px;
        width: 35px;
        height: 35px;
        background: var(--bubble-color);
        border-radius: 50%;
        opacity: 0.9;
    }
    selector::after{
        content: '';
        position: absolute;
        top: 90px;
        left: 110px;
        width: 15px;
        height: 15px;
        background: var(--bubble-color);
        border-radius: 50%;
        opacity: 0.9;
    }
    selector h2{
        position: relative;
        width: var(--heading-circle-size);
        height: var(--heading-circle-size);
        background: var(--heading-background);
        border-radius: var(--heading-shape);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.5s ease-in-out;
        box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1), inset -2px -5px 10px rgba(255,255,255,1), 15px 15px 10px rgba(0,0,0,0.05), 15px 10px 15px rgba(0,0,0,0.025);
    }
    selector:hover h2{
        border-radius: var(--heading-hover-shape);
    }

🔧 Need Help With Elementor or Custom Design?

At CodeXcool, we provide premium Elementor customizations, speed optimizations, and website redesigns for businesses and creators.

👉 Hire Us via CodeXcool →
💡 Also, check our tech tutorials at EncodeMore

---

📌 Final Words

This Water Drop Hover Effect adds personality and interactivity to your Elementor designs — without slowing down your site. Try it today and impress your visitors with a fluid, modern UI vibe.

If you found this useful, don’t forget to bookmark EncodeByte and subscribe for more free tutorials and effects like this!

---