Switching a background image with an animated GIF on hover can be a great way to bring life to your content while also providing a cool illustration for products or services. For example, if you are promoting the features of a particular software product, an animated GIF can help illustrate aspects of the products functionality (we do this for the products here at Elegant Themes). But, instead of showing that GIF initially, you may want to show a still screenshot of that function that is replaced with an animated version (or GIF) on hover.

In this tutorial, I’m going to show you how to create a blurb that switches a background (still) image with an animated GIF on hover. We’ll start by going over how to create a screenshot and GIF using Snagit (a screen capture software). Then we’ll go over how to implement those background images into a blurb so that they switch on hover. The actual switching of the images is extremely easy with Divi’s background hover options.

This design will help keep the design static upfront and then engage users whenever they interact with the content.

Read more: https://www.elegantthemes.com/blog/divi-resources/how-to-switch-a-background-image-with-an-animated-gif-on-hover