Animated Image Caption Hover Effects in Divi
Welcome to the first post/tutorial of Divi Life! In this tutorial, I’m going to share with you how to create some really cool hover animations with captions that you use on any Divi website. You can skip straight down to the code, or personally I recommend watching the video tutorial above.
Let me tell you a little bit of the backstory for this tutorial. I built a website for a really cool cafe with a dozen or so locations throughout Southern California called Mendocino Farms. I was able to achieve some really cool things for the website site using Divi, that are outside of the “out of the box” features, and I had a lot of people ask me how to do certain things. And then when the site was recently featured on Elegant Themes, I got even more questions and a lot of requests for tutorials. So, with the launch of Divi Life, I decided it was time to create a tutorial series on the different aspects of the Mendocino Farms website.
You can see above in the featured image what we’ll be creating, but you can also see the demo here:
View Demo Here
For this tutorial, I’m going to walk you through step by step, how to create this. However, at the end of this post, you can download the layout and import it directly to your site. So if you’d like to cheat, and skip to the good stuff, go right ahead. 😉
Let’s Get Started
For this tutorial, we’re going to be taking advantage of the power of the Divi code module. We’re going to be placing some HTML into three separate code modules, and then adding the appropriate CSS. There’s an additional step to upload the photos that you want, and link them properly in the HTML, but we’ll get to that.
Create a new standard section and row with three columns (1/3, 1/3. 1/3). Next, add a code module to each column.
Copy and paste each column’s HTML code from below, and paste it into the corresponding column on your page.
Copy and paste the CSS from below, and paste it either in the custom CSS box in Divi Theme Options, the custom CSS box within the page settings, or within your child theme’s style.css file.
Download the image .zip folder and unzip the folder. Next, navigate to your WordPress media library, and upload the images. This includes the three images that you see for each feature, plus the lines and the hover outline. You can of course use your own images for the feature images and just upload those instead. Next, from the media library, copy the URL from each image and paste it into the HTML inside the code module to replace what’s already there. You’ll need to do this for each column’s module. You’ll be replacing the URLs that comes after src= (be sure there’s a starting and ending parenthesis around the URL). The first image in the HTML is the feature image, then the lines, then the hover outline.
And we’re done! View the front end and enjoy. You just created a snazzy 3 feature image section with animating captions. To change the background color of the hover, just edit line 29 from the CSS code above.
Wanna download the Divi section file that you can easily import into your site and save a few steps? You can do so here. Just make sure you still follow steps three and four above, but this will save you from having to copy and paste the HTML code.
As mentioned earlier in the post, there’s other tutorials and resources from some friends of mine who are leaders in the Divi community.
Tutorials by Geno Quiroz:
Divi Module Hover Animations
Plugin Option by Terry Hale of Superfly (previously Elegant Child Themes):
Image Intense Plugin by Superfly
If you have any questions or comments, please feel free to write them below.