Get A Free Quote Today
Fill out the form below, or call us at 678-671-6539
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.
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:
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)
Hover over this column
You’ll need two versions of your image:
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:
Open your Page Settings (gear icon at the bottom of the Divi Builder)
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!
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
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!