How to animate a GIF on hover in Divi (With free JSON template!)

by | Jun 5, 2025

Looking to add subtle motion to your Divi layout without it being over the top?

Here’s a simple trick: make a GIF animate only when someone hovers over the entire containing column – not just the image.
(Later in the post I include a script to animate the GIF when only the image itself is hovered. Scroll down to the bottom of the post for that!)

This is perfect for those times when you’ve turned a whole column into a clickable area, like linking to a service page or portfolio project. Instead of relying on the user to hover over a tiny image, this approach triggers the animation when they hover anywhere in the block — which makes way more sense for usability in my opinion.

 

Why Use a Hover-Triggered GIF in Divi?

Using a looping GIF can be distracting, especially when it plays endlessly before the user even interacts with it. This method keeps your layout from being annoying — the GIF stays still until the user hovers, then animates as a subtle visual cue.

Plus, it’s lightweight, requires no plugins, and works great for:

  • Service previews
  • Featured content blocks
  • Custom cards or CTA sections
  • Anywhere you’re using columns as big clickable areas

 

Set It Up With Just CSS (No JavaScript Needed)

You don’t need JavaScript for this one. The CSS handles everything on hover. Let’s walk through the setup. (If you’d like to skip the setup and make it easy, we’ve provided a free JSON divi template at the bottom of the post)

Try it out!

Hover over this column

Learn More

Step 1: Add Your Images

You’ll need two versions of your image:

  • A still frame (.static) – can be a JPG, PNG, or a paused version of the GIF.
  • The actual animated GIF (.active).

Stack them right on top of each other using the code below— we’ll fade one in and out with CSS later.

Inside the column where you want the animation, add a Code Module and paste in this:

Step 2: Add the CSS

Open your Page Settings (gear icon at the bottom of the Divi Builder)

  • Go to the Advanced tab
  • Paste this into the Custom CSS box:

This handles the fade between the two images. When you hover over the column, the .static image fades out, revealing the .active GIF underneath.

That’s it!

 

Add Hover GIF Animation to Your Divi Layouts Today

With this easy setup, you can give your Divi columns a subtle animation boost that reacts to user interaction — without overwhelming your design or slowing down your site. Whether you’re showcasing services, portfolio items, or featured content, this hover-to-animate GIF trick helps your site stand out with just a few lines of CSS.

Want to skip the setup and drop this effect right into your site?
👉 Download the ready-to-use Divi JSON template and start adding hover GIF animations to your columns in Divi

Alternate Solution: Animate a GIF in Divi Only When Hovering Over the Image (Not the Column)

Instead of making the whole column trigger the animation, you can alsoset it so the GIF only animates when the user hovers directly over the image itself.

This is a solution that I don’t use as often, but it is ideal when the GIF acts as a button, icon, or any other element that’s clearly clickable, with no other surrounding elements that are a part of what should be clearly clickable. It makes the interaction feel intentional and keeps background motion to a minimum.

Insert the following into a code module:


Then, add the following to your page’s CSS:

That’s it! I hope you’ve found some of this useful! Download the JSON file below.

👉 Download the divi JSON template for animating GIF on hover in Divi

Hover over the image above!