What You’ll Learn

We’re going to show you how to load a static image first and switch it to an animated GIF when the user hovers. Why? Because if you drop a GIF directly into Divi, it starts playing right away and never stops. That’s great for cat memes, but terrible for UX.

Try it 👇

Before You Start

• You’ll need a static image (JPG or PNG) that acts as your preview thumbnail.
• An animated GIF version of that image.
• A Divi website (obviously).
• About 3 minutes and one cup of coffee.

Step 1: Add an Image Module in Divi

In the Divi Builder, drop in a regular Image Module where you want your hover animation magic to happen. Upload your static image as the main image.

Step 2: Add a CSS Class

Still in the Image Module, go to the Advanced > CSS ID & Classes tab and give it a class. Let’s call it de-gif-hover. You can change this later if you’re feeling rebellious.

Step 3: Add Custom CSS

Now jump into Divi > Theme Options > Custom CSS and paste in the following:

.de-gif-hover {
  content: url('https://yoursite.com/path-to-static-image.png');
  transition: all 0.3s ease-in-out;
}

.de-gif-hover:hover {
  content: url('https://yoursite.com/path-to-animated-gif.gif');
}

Replace the URLs with the actual links to your static image and your animated GIF. You can upload both to the Media Library and copy the URLs from there.

Ideas for Where to Use This

• Team pages: Hover to animate staff doing something quirky.
• Product listings: Show product in action when hovered.
• Portfolios: Static preview, animated case study when hovered.
• Testimonials: Add subtle movement to boost authenticity.

Wrapping Up

This method keeps your page load light and your animations subtle but effective. Great UX without slowing down the site or overwhelming your visitors with dancing pixels on page load. If you’re already using Divi BodyCommerce or Divi Machine, imagine layering this technique over your product galleries or custom loops for some extra flair.

And if you want to keep pulling off cool tricks like this without writing a single plugin, grab our All Access Pass and unlock every plugin, layout, and secret weapon in our vault. Because let’s be honest, your site deserves more than a static shrug.