Elementor Cross Fade Images on Hover

In this tutorial you are going to learn how to cross fade background images on hover of any element in Elementor.

This is quite a flexible method, that will allow you to smoothly change the background image on hover, while keeping awesome page performance as the large images are loaded only after there is an interaction from the user.

It can even be combined with custom loops and the Posts element from Elementor Pro, or the Listing Grid element from JetEngine, with great results.

See the demo here:

Visit the demo page directly.

Features:

• The images are lazy loaded for optimal performance
• Smooth cross fade animation
• Works with custom loops
• Works for multiple such designs on one page
• Containers ready
• Also works with the old sections and columns
• Demo is included as a template file
• Works with Elementor Free (Elementor Pro is required for the template files though, as it uses the CTA element)

Note that this is a desktop only design, as there is no hover on mobile devices.

Important note: You will need the feature "Container" to be enabled under Elementor > Experiments > Container. This uses the new Container element.

Let's get started!

First, let's setup your layout properly