Elementor Water Drop Cards Hover Effect | Elementor Pro Tutorial

Quick Summary

In this tutorial, I'll show you using Elementor, How to Make an Awesome Water Drop Card Hover Effect | Creative & Unique WordPress Elementor Pro Tutorial!!!

10 Million+ website owners started using the Elementor page builder. I'll show you the easiest way how you can create your personal resume website using Elementor Page Builder yourself.

If you're searching for how to make an eCommerce website, how to make a professional webShop from scratch, how to create an Online Store website step by step using woocommerce elementor, woocommerce subscriptions, WordPress eCommerce 2022 tutorial for beginners, woocommerce plugins, woocommerce payment gateway, best website making course, Elementor tutorial for beginners – then this tutorial is for you.

And, lastly, If you want me to build your AWESOME website at an affordable price,

Tools and Links Used

NameHero Managed WordPress hosting with fast support.

Get Hosting

Elementor The free page builder this tutorial is built with.

Get Elementor

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

CSS Generator Free online generator used in this tutorial.

Open Tool

Kitpapa Ready made Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Water Drop CSS

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

Elementor Water Drop Cards Hover Effect | Elementor Pro Tutorial

Quick Summary

Tools and Links Used

Prompt Used in This Tutorial

Get Your FREE Freelancing Roadmap

Related Tutorials

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel