Make Elementor Pop-up overlay fade-in and fade-out CSS

There are couple of use scenarios for popups that might require you to add fade-in and fade-out effect for the overlay.

As you know, the popups in Elementor Pro are using a modal Lightbox which holds the elements and widgets. Sometimes you might need to add some animation the Lightbox overlay like fading, blur, etc.

How to apply fade-in and fade-out to Elementor Popup overlay

To apply the Fade animation effect on the Elementor popup Lightbox overlay, we need to add some CSS snippet. There are many ways of adding custom CSS code in WordPress.

How to add custom CSS in Elementor PRO

Elementor PRO comes with options to insert the your custom CSS in couple of ways. The easiest one is by accessing the Site Settings options by clicking on hamburger menu icon in the top left corner. Then just access the Custom CSS tab and you will see the field for adding Global custom CSS in Elementor.

elementor custom css global
Global Custom CSS option in Elementor

Once you are inside the Site Settings, access Custom CSS option and paste this code in the field:

/*
Make Elementor Pop-up overlay fade-in and fade-out CSS
CSS Snippet by Worda Themes
*/

.elementor-popup-modal:not([style="display: none;"]) {
    transition: all .3s;
    opacity: 1!important;
}

div.elementor-popup-modal[style="display: none;"] {
    transition: all .3s;
    opacity: 0;
    display: flex!important;
    z-index: -5;
}

.elementor-popup-modal[style="display: none;"]>div {
    display:none
}

.elementor-popup-modal {
    -webkit-animation:wrd_fadein .5s cubic-bezier(.39,.575,.565,1.000);
    animation:wrd_fadein .5s cubic-bezier(.39,.575,.565,1.000)
}

@-webkit-keyframes wrd_fadein {
    0%{opacity:0} 
    100% {opacity:1}
}

@keyframes wrd_fadein{
    0% {opacity:0} 100% 
    {opacity:1}
} 

The solution works right out of the box, but you can tweak the values to match your desired colors, animation duration and other fine tuning.

Once you apply adjustments to the CSS code, just hit Update button and clear the cache on your website and browser.

Once you trigger your popup you should see the nice fade-in effect and fade-out on exit.

Conclusion

This comes as a quick solution which doesn’t require much tweaking. If you know some better way of making fading animation for Elementor Popup overlay or you have any thoughts, feel free to leave a comment below.

Share this post if you like it.
Davor Veselinović
Davor Veselinović

I'm Davor aka. Worda, founder of Worda Themes. Working as a Full Stack Developer with more than a decade of experience with WordPress. I build themes and plugins and enjoy writing useful blog posts and sharing my ideas with others.

Leave a Reply

Your email address will not be published.