Facebook-f X-twitter
EncodeByte
Need Help!
  • How-To
    How-ToShow More
    How To Redirect Old Website To New Domain Without Losing SEO | 301 Domain Redirect
    By
    Franchbabu
    How to Fix the “Windows Cannot Be Installed to This Disk” Error
    By
    EncodeMore
    How to Check Your Laptop’s Battery Health: A Step-by-Step Guide
    By
    EncodeMore
    How to Become a Freelancer in 2025: A Comprehensive Guide.
    By
    EncodeMore
    How to Activate Windows Legally and For Free (100% Working)
    By
    EncodeMore
  • Web Development & Coding
    Web Development & CodingShow More
    How to Become a Freelancer in 2025: A Comprehensive Guide.
    By
    EncodeMore
    Top In-Demand Freelancer Niches for 2025 – Fast Growth Ahead!
    By
    EncodeMore
    🚀 10 Reasons Why Hostinger Is the Best Web Hosting Platform for Speed, Security & Affordability
    By
    Franchbabu
    How to Add “Made with ❤️” to Your WordPress Footer (No Plugin Needed)
    By
    EncodeMore
    WordPress Redirect After Login: How to Set It Up
    By
    EncodeMore
  • Code Snippets & Scripts
    Code Snippets & ScriptsShow More
    How to Hide a Class in WordPress (Easy CSS & Admin Tips)
    By
    EncodeMore
  • Website Design & UX
    Website Design & UXShow More
    10 Web Design Mistakes That Are Killing Your User Experience (and How to Fix Them)
    By
    Franchbabu
  • Make Money Online
    Make Money OnlineShow More
    How to Become a Freelancer in 2025: A Comprehensive Guide.
    By
    EncodeMore
    Top In-Demand Freelancer Niches for 2025 – Fast Growth Ahead!
    By
    EncodeMore
    Website related skillsets that you shoud have
    By
    EncodeMore
    Top Sites Like Fiverr: The Best Fiverr Alternatives for Freelancers
    By
    Franchbabu
    Best Telegram Channels For Free Paid Courses
    By
    Franchbabu
  • 🤩 Trending:
  • How-To Guides
  • WordPress & Website Development
  • Web Development & Coding
  • Windows & Software Fixes
  • Tech Tips, Tools & Tutorials
  • Computer Tips & Tricks
Font ResizerAa
EncodeByteEncodeByte
Search
  • How-To
  • Web Development & Coding
  • Code Snippets & Scripts
  • Website Design & UX
  • Make Money Online
Follow US
Made by ThemeRuby using the Foxiz theme. Powered by WordPress
WordPress & Website DevelopmentFront-End Development

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

Last updated: August 1, 2025 9:35 am
By
Franchbabu
Share

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.

Contents
⚙️ What You’ll Need💧 Step-by-Step Tutorial: Water Drop Hover in Elementor🔹 Step 1: Create a Card in Elementor🔹 Step 2: Add a Custom Class🔹 Step 3: Add the CSS CodeWater Drop CSS #2Customization TipsDownload Code You can copy the full working code above or grab it as a downloadable .css file:Water Drop CSS #3💡 Bonus Tip:🧠 Why Use This Hover Effect?📈 SEO Benefits💬 Final Thoughts🔗 Want More Cool Effects?

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

TAGGED:CSS AnimationElementorHover EffectsUI DesignWater Drop Effect
Share This Article
Facebook Whatsapp Whatsapp LinkedIn
Leave a Comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Popular Categories

Themes & Customization

1 Article

Troubleshooting & Fixes

1 Article

WordPress Tips & Tricks

6 Articles

WordPress Tutorials

5 Articles

Must Read

WordPress & Website DevelopmentHow-To Guides

How to Create a Private/Password Protected Post or Page in WordPress

How-To GuidesSEO Tips & StrategiesWordPress Tutorials

How To Redirect Old Website To New Domain Without Losing SEO | 301 Domain Redirect

Computer Tips & TricksHow-To Guides

How to Repair a Bad Hard Disk (Hard Disk Low Level Format)

How-To GuidesTech Tips, Tools & Tutorials

How to Remove URLs From Google Search

  • I need help with …

Starting a Blog

WordPress SEO

WordPress Performance

WordPress Errors

WordPress Security

Got A Question?

Need Expert Help?
Let CodeXcool power up your website with
custom WordPress design, speed optimization, and SEO!
🚀 Get Started

You Might also Like

How-To GuidesWordPress & Website Development

How to Reset WordPress Admin Password from Softaculous?

How-To GuidesTroubleshooting & FixesWordPress Tips & TricksWordPress Tutorials

How do I unblock my WordPress login page?

How-To GuidesWordPress & Website Development

How to Upload WEBP images in WordPress (Without Any Plugins)

WordPress & Website DevelopmentHow-To Guides

How to Fix “Error Establishing a Database Connection” in WordPress [STEP BY STEP]☑️

EncodeByte

© 2025 EncodeByte – Discover expert tech tutorials, coding guides, troubleshooting solutions, and free tools. Simplify technology, build smarter, and learn faster with us.

About Us / Privacy Policy / Contact Us

Latest News

  • Coming Soon
  • Coming Soon
  • Coming Soon
  • Coming Soon

Services

  • Coming Soon
  • Coming Soon
  • Coming Soon
  • Coming Soon

Looking for custom web development or maintenance?

Check out our parent team at [CodeXcool.com] 🚀
— Let's build together!
Request a Quote
Welcome Back!

Sign in to your account

Username or Email Address
Password

Lost your password?