Create stunning hover effects with zoom and blur in Elementor

In this exciting tutorial, I’ll show you how to achieve a captivating hover effect using Elementor. By implementing a simple code snippet, you can make your cards, text containers, or buttons come to life with zooming and blurring animations. This effect adds a touch of elegance and interactivity to your website. Let’s dive right in!

  • Creating the Layout: To begin, we’ll create a container and add an image box inside. With a few adjustments to the padding, background, border, and shadow, we’ll set the stage for our hover effect.
  • Styling the Cards: Next, we’ll style the cards by customizing their appearance, including the border, shadow, and over animations. We’ll also define the fonts, colors, and spacing to create a clean and minimalistic design.
  • Applying and Editing the CSS Code: To bring the hover effect to life, we’ll paste a code snippet provided below. This code snippet contains settings for zooming, blurring, and other visual aspects of the effect. You can tweak these values to achieve your desired level of animation.

Keep in mind that the custom CSS feature is only available for Elementor Pro users. Click here to get Elementor Pro license now!

/*Blur Zoom Hover Effect*/

selector{
    --zoom-in: 1.2;
    --zoom-out: 0.9;

}
selector{
    transition: all .5;
}
selector:hover .card-box{
    filter: blur(5px);
    transform: scale(var(--zoom-out));
}
.card-box{
    transform: scale(1);
    transition: all .5s;
}
.card-box:hover{
    transform: scale(var(--zoom-in)) !important;
    z-index: 2;
    filter: blur(0px) !important;
}
selector .elementor-widget-wrap{
    transition: all .5s;
}
selector .card-box:hover .elementor-widget-wrap{
    background: var(--hover-background) !important;
}
  • Final Adjustments and Result: After applying the CSS code, we’ll make some final adjustments to fine-tune the effect. We’ll reduce the aggressiveness of the zoom and blur, ensuring a subtle and visually pleasing result. With everything in place, we’ll update the changes and witness the stunning hover effect on the front end of our website.

Conclusion: Congratulations! You’ve successfully learned how to create an eye-catching hover effect using Elementor. This effect can elevate the visual appeal of your website and engage your visitors. Feel free to experiment with different elements and customize the code to match your unique design preferences.

If you found this tutorial useful, please consider subscribing to my channel and giving this video a thumbs up. Don’t forget to share it with anyone who might benefit from it. Thank you and see you in the next tutorial!

Share this post:

My weapons of choice:

Elementor Pro

WP Rocket

WP Engine

You may also like:

How to change selected text & background color
Learn how to change the text highlight color on your WordPress website.
Create dual color headings in Elementor (no plugin)
Learn how to create dual color headings in Elementor without using any plugins.
How to Open Menu Items Open in a New Window
Learn how to open menu items in new windows on your WordPress website.

Ready to transform your business?

Combining world-leading creative and rich strategic insight, I build digital experiences that differentiate brands, engage customers and deliver tangible business results.​