Elementor Water Drop Card Hover Effect – Beautiful CSS Hover UI You Can Use Today!

Is your website feeling outdated? Want to make your card designs stand out and keep visitors engaged? Introducing the Water Drop Card Hover Effect – a stylish, smooth animation you can build directly in Elementor using custom CSS.

Whether you’re a designer, developer, or hobbyist, this effect is modern, lightweight, and guaranteed to add some “wow” to your user interface.

---

⚙️ What You’ll Need

• ✅ Elementor (Free or Pro)
• ✅ A card widget or section for the effect
• ✅ A little CSS magic ✨

💡 Tip: You don’t need any heavy JS libraries for this effect. It’s responsive, fast, and works beautifully on modern browsers.

---

💧 Step-by-Step Tutorial: Water Drop Hover in Elementor

🔹 Step 1: Create a Card in Elementor

1. Open any page using Elementor.
2. Add a Column → Insert an Inner Section.
3. Drop a Heading, Text Editor, and Button widget.
4. Add background color, padding, and spacing as needed.

🔹 Step 2: Add a Custom Class

Go to the Advanced > CSS Classes and type:

water-drop-card

🔹 Step 3: Add the CSS Code

Go to Advanced > Custom CSS (Pro) or use Code Snippets plugin for free version:

.water-drop-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}

.water-drop-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s ease-in-out;
}

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

.water-drop-card:hover {
  transform: translateY(-10px);
}

Water Drop CSS #2

.water-drop-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-drop-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-drop-card:hover::before {
  transform: translate(-50%, -50%) scale(2);
}

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 #3

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);
    }

💡 Bonus Tip:

You can change the background blur, glow, or color based on your brand palette.

---

🧠 Why Use This Hover Effect?

• 🌊 Unique UI/UX experience
• ⚡ Loads fast (pure CSS!)
• 📱 Mobile-friendly & responsive
• 🎯 Perfect for portfolios, pricing tables, or blog cards

---

📈 SEO Benefits

Google loves fast, engaging, interactive content. This kind of smooth UI improvement helps:

• Reduce bounce rate
• Improve session duration
• Increase engagement signals for ranking

---

💬 Final Thoughts

This Water Drop Hover Effect is easy to implement and makes your design stand out. Try it today on your homepage, service cards, or blog archive layout. With Elementor and a dash of CSS, you can achieve impressive visuals without writing JavaScript.

---

🔗 Want More Cool Effects?

➡️ Check our full tutorials and step-by-step guides on EncodeByte.com
➡️ Need custom website effects or Elementor support? Contact our agency at CodeXcool.com