A couple of posts ago I started the first in a series of reviews of the free CodeLights plugin called SiteOrigin Widgets. My first post in this series was on the Flipbox component of this plugin. Now I will explore the image hover effects or as they call it, the Interactive Banner component with the Divi or Extra Theme. This component essentially offers 8 image overlay/hover effects (they call them animation types) to which you can apply one of four animation easings.
Here’s an example of each effect, all with the same Animation Easing, which in these examples, is ease. The name of the animation is given in the title of the the text displayed over the image. The animation is triggered by hovering your mouse over the image or in the case of a touch screen, touching the image will trigger the animation.
Now that you’ve seen what it can do, let me show you how easy it is to create the same.
Begin by installing the SiteOrigin Widgets plugin and then in your Divi layout add a text module for each image you’d like to use in your design. In the editor you’ll see a new icon in your toolbar.
Clicking this icon brings up a window that asks you to choose from the six components the plugin offers.
In this tutorial, we’re going to use the Interactive Banner option. This brings up the settings window which you’ll use to choose which animation type you’d like to use (see arrow below) as well as the text you’d like to have appear over the image.
As you can see, there are three tabs which are pretty self explanatory, so go ahead, add your image and text and tailor the settings to your needs, click Save Changes and and the resulting shortcode will be added to the text module. If you decide you need to make an edit to the shortcode, simply highlight it and click on the CodeLights icon in the toolbar. This will bring up the Window with the setting already in place, waiting for you to make your changes.
Wrapping It Up
You’ve got to love this free plugin! I mean, it’s got so much to offer and what it does, it does well, and the good folk over at CodeLights are maintaining it (they have updated it numerous times since its initial release). And since it plays nicely with Divi, it makes for a very useful tool. If there was one thing I could ask for in this component, it would be for more control of the animation speed. Some of the animations are just a little too fast for my liking.
If you’d like more options or deep Divi/Extra integration, grab a copy of Image Intense, it’s a great premium plugin and integrates into the Divi Modules window. I bought a copy a while back and it’s paid for itself already in the time I’ve saved. There are also a number of tutorials out there for the DIY’ers if you prefer not to use a plugin for something like this or you’re looking for more variety. Here are a few you can check out:
- Animated Image Caption Hover Effects in Divi – divilife.com
- Image Module Hover Effect – yatesdesign.com.au
- Four Linkable Image Hover Effects – divisoup.com
Any there we have it folk, a quick and easy way to add image hover effects to your Divi posts and pages.
If you know of any other good hover effect tutorials, please feel free to add them in the comments below.