Unique Ripple Effect Animation on Hover That Follows Cursor

Published June 1st, 2023 9 min read

Hey designers and developers! Today, I'm thrilled to showcase a mesmerizing and unique ripple effect animation that elegantly follows the cursor on hover. This eye-catching animation will undoubtedly add a touch of magic to your website or project! Let's dive into the tutorial:

HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ripple Effect Animation on Hover</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="ripple-container">
        <div class="ripple"></div>
        <!-- Add your content here (e.g., an image, button, or any other element) -->
    </div>
</body>
</html>

Now, let's bring this ripple effect to life using CSS:

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.ripple-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.3);
    transform: scale(0);
    animation: ripple-animation 1s linear;
    pointer-events: none;
}

/* Optional: Customize the ripple color and size for your design */
.ripple-container:hover .ripple {
    animation: ripple-animation 1s linear;
}

@keyframes ripple-animation {
    to {
        transform: scale(3);
        opacity: 0;
    }
}

In this example, we use a div with class .ripple-container that wraps the content we want to apply the ripple effect to. The ripple effect itself is achieved using a pseudo-element, .ripple, which has a circular shape created by setting border-radius: 50%.

When you hover over the .ripple-container, the animation is triggered, and the ripple expands and fades away gracefully, following your cursor's movement. It adds a delightful and interactive element to your website, making it stand out from the crowd.

Remember to customize the .ripple size, color, and animation duration according to your project's requirements.

Now you have a magical ripple effect that follows the cursor on hover. Enjoy implementing this animation and impress your visitors with a unique and engaging user experience! 🌊✨