Animated Image Caption Hover Effects in Divi

by | Aug 8, 2016 | Divi Tutorials | 45 comments

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.

Step One.

Create a new standard section and row with three columns (1/3, 1/3. 1/3). Next, add a code module to each column.

Step Two.

Copy and paste each column’s HTML code from below, and paste it into the corresponding column on your page.

Step Three.

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.

Step Four.

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.

 

Additional Resources

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 Michelle Nunan from Divi Soup:
Four Linkable Hover Effects
Four More Linkable Hover Effects

Tutorials by Geno Quiroz:
Divi Module Hover Animations

Plugin Option by Terry Hale of Superfly (previously Elegant Child Themes):
Image Intense Plugin by Superfly

 

Have fun!

If you have any questions or comments, please feel free to write them below.

45 Comments

  1. Rebecca Mead

    This is terrific! Thanks, Tim.

    Reply
    • Tim Strifler

      You’re welcome Rebecca! I’m so glad you found it helpful 🙂

      Reply
  2. Jenna Britton

    Awesome post. Is all the code customizable to change typefaces and colors? I couldn’t seem to get the typefaces to change when changing the code. Maybe I am missing something. Thanks!

    Reply
    • Tim Strifler

      Hi Jenna, I’m glad you like the post! 🙂

      Thanks for pointing that out. I accidentally left some CSS for the fonts inside the code above. I’ve updated the post now, so you should be able to customize the fonts more easily. It should automatically inherent the fonts that you’ve defined in Divi, but can be tweaked by declaring them in the CSS. Let me know if you have any more questions!

      Reply
      • Jenna

        Thanks for your help! It works great. I had one other question about the white lines you created. Am I able to remove that in the code if I don’t want any lines? I tried removing the src image code but it messed the layout up. Thanks again!

        Reply
        • Tim Strifler

          You’re welcome! Do you mean the lines that are above the titles before hovering? If so, you can remove them with CSS code. Just place the below code at the end of the CSS code:

          .mendo-lines {
          display: none;
          }

          That should do it 🙂

          Reply
  3. Catherine Spillone

    Hello Tim,
    Beautiful post and result. Thanks for sharing with us.

    Reply
    • Tim Strifler

      You’re welcome, Catherine! I’m glad you liked it 🙂

      Reply
  4. Christine

    Your tuts are bombtastic! Thank!!

    Reply
    • Tim Strifler

      Thanks Christine! I’m glad to hear you like them. They’ll be plenty more coming— 50+ in the queue, so don’t forget to subscribe, if you haven’t already 🙂

      Reply
  5. Tatiana

    Hi Tim,
    This tutorial works a treat! I admired the technique greatly on the original Mendo site and am delighted you made it available, so thank you. My only feedback is that your instructions don’t clearly articulate where you add the url links for the ‘learn more’ section. I figured it out, but it took me a while, being a newbie and all. It sure would have been nice to have it in the steps you outline. Once again, thank you, and it is a lovely look.

    Reply
    • Tim Strifler

      You’re very welcome, Tatiana! I’m glad you enjoyed the tutorial! Thank you for the feedback. I will definitely make sure to detail things out in more steps for future tutorials 🙂

      Reply
    • Kaja

      Tatiana how did you do it? I think I tried everything, no luck. Can you show me where did you put it?

      Reply
  6. Dennis King

    Great post. Helped me better understand a hover effects plugin I was using but I already picked the Divi theme because it’s so flexible, so this was really ideal. While we can easily change the color in line 29 of the stylesheet, how complicated would it be to set up different colors for each box? My site is here: http://45c.a54.myftpupload.com/. Appreciate any help.

    Reply
    • Tim Strifler

      Hi Dennis,

      Great questions! It wouldn’t be very difficult at all. You would just need to make each box a different class (box1, box2, box3 and overbox1, overbox2, overbox3) and then change the background color in the CSS accordingly for the .box .overbox:hover – Does that make sense? Let me know if you have further questions 🙂

      Reply
  7. Michael Breslow

    Tim,

    I am late to the game, as they say. But, I have a problem with any of the lines (top and bottom text frame or border) not showing up 🙁 And, when I place () around the image file, it disappears. Any ideas or suggestions?

    Appreciate all you do. Thanks.

    Reply
  8. Michael Breslow

    Tim,

    Me again 🙂 I went to Inspector and it seems that the Mendo LInks Outline nor the Mendo Links Title are working. I am using the latest edition of Divi (3.0.17) and wonder if that might not have something to do with it.

    I will leave things as they are so you can see what I mean.

    Reply
    • Tim Strifler

      Hi Michael,

      Sorry for the delay! It looks like the image paths are incorrect. I can see they are relative image paths, and so they are likely not set up correctly. I would go to your media library and find the image path and copy the entire URL and then replace that with the relative paths that you have now. Does that make sense? Hope that helps! 🙂

      Reply
  9. Shah zain

    Bro Help Me 🙁 i can’t understand what you are doing :'(

    Reply
    • Tim Strifler

      Sorry to hear you’re having trouble, Shah. Can you give me some more specifics on what isn’t working for you?

      Reply
  10. Kaja

    Hi! Great things you’re showing us! Thanks. Quick question – I made 4 boxes instead of 3, is there anything I should be aware of? I changed a colour, my lines look grat on the pictures I’m using. Anything taht is not correct – on my big screen at work it looks great, but at home all 4 modules are still big but there is not enough place for them so they’re like sqeezed, The site lacks spacing between the boxes. How to achieve correct box spacing on a webpage on different screens or browsers?

    Reply
    • Tim Strifler

      Hi Kaja,

      To use 4 boxes, you’ll need to tweak the CSS media queries so that it scales properly. Unfortunately, I don’t have the time to do this for you, but there’s lots of great resources our there. Just search “CSS media queries” 🙂

      Reply
  11. Juan

    Its cool, thank you very mucho for share with us…

    Reply
  12. Darius

    Thanks for this tutorial! I would like to increase the width and the heigth of the images displayed. Please how can do that?

    Reply
    • Tim Strifler

      Hi Darius,

      You can change the width and height of the images by adjusting height and width in this CSS:

      .box {
      height: 274px;
      position: relative;
      overflow: hidden;
      width: 363px;
      margin-left: auto;
      margin-right: auto;
      }

      Keep in mind though that you’ll also have to adjust other parts of the CSS too so that the overlay and outlines still line up on hover.

      Reply
  13. Léa

    Hi Tim,

    It all seems so simple when you do it… i’m a newbie at this but still i understand more and more everyday ! I need to apply this code to 8 boxes (2 rows of 4) i have managed to change the boxes to the height and width i need, the hover background color and the font size (text and title) using !important in the css. However, I cannot manage to justify my text nor keep my title when hovering (it stubbornly disappears..). Moreover, I think i’m starting to understand your css code by just playing around, using display: none; to check where it applies thus : what is the purpose of .mendo-links-purpose and .mendo-links-passion ? it doesn’t seem to apply to anything in the html code ! Also would it be possible to change .mendo to another word?

    I hope i made myself clear 🙂 looking forward to hearing from you.

    Léa

    Reply
    • Tim Strifler

      Hi Léa,

      I’m glad to hear you’re learning a lot! You can definitely change the word mendo to whatever you’d like. Just be sure ti update it across all the CSS classes. I’d recommend putting it in a text editor and doing a replace all 🙂

      Reply
  14. Léa Terrien

    Hi again,

    I have another question : when hovering it seems that my title stays in the background and goes down (because my hover background is a bit see through we can see it). I’d like that title to disappear from the background and appear on hover (if that’s understandable..)

    Thank you again, Léa

    Reply
    • Tim Strifler

      Hi Léa,

      I’m not sure I fully understand. The code in the tutorial should make it so the main title disappears on hover already. If you put the code in correctly then it should do that automatically..

      Reply
      • Léa Terrien

        Hi Tim,

        Thank you for getting back to me so promptly. I have solved my problem thank you 🙂 Now, what if i wanted my boxes to be round ? Would that be possible ?

        Thank you in advance !

        Léa

        Reply
        • Tim Strifler

          Glad you got it figured out! Yes, you can make the boxes round by changing the border-radius. You’ll most likely have to decrease the width as well in order to make them perfectly round.

          Reply
  15. Iris

    Hello.

    First thank you for providing such useful material for us newbies:) I decided to write because I have the same problem as Lea. I did some changes to the images, removed the lines etc…but now my text on hover is moved down…so it starts at the middle height of the box, no matter how much text there is. And i cannot figure it out where can i set the “location” of text on hover
    Any solution? Thank you again

    Reply
    • Tim Strifler

      Hi Iris,

      You can adjust the position of the description text by adjusting the margins in the CSS for .mendo-links-description

      Reply
  16. Pau

    Hi there, Tim. Thanks a lot for your post, it’s really helped me. Just one question: How can I change the purple color for another one similar to the light blue you used for the meals website? I can’t find the exact value on the code. Thanks,

    Pau

    Reply
    • Tim Strifler

      Here’s the color: rgba(161, 83, 224, 0.9)

      You’ll have to look in the code and replace it with the color of your choosing. You could also do a “find and replace” in a code editor for even faster results 🙂

      Reply
  17. Troy

    Is it possible to do this effect to a Fullwidth portfolio Module so the individual projects will have this effect with different hover colors and text on each individual project?

    Reply
    • Tim Strifler

      Hi Troy,

      I don’t think it’s possible. This requires adding additional HTML that doesn’t exist with the portfolio thumbnail. I’m sure you could create a similar effect with the HTML that is there, however it would require a re-write of the tutorial.

      Reply
  18. Ramón Juan Martí

    Hi!
    Congratulations, very good job! I was searching the way to do this the whole yesterday and I find you. 😉
    Now, I have a question for you. When the width is less than 1285px the space between the columns isn’t the same. I would like to keep always a margin-right of 8px but I don’t how can I do that. I have tried everything to get this without success. Can you help me please?

    Reply
    • Tim Strifler

      Hi Ramón,

      I’m glad you found my tutorial then 🙂

      Reply
  19. gael

    thank you so much for your tuts,the only issue i have is that images display too small no matter how large i choose them…how to fix that?

    Reply
    • Tim Strifler

      Hi Gael,

      Are you following the tutorial exactly? Because they should look just like the demo.

      Reply
  20. Susan

    Tim! A quick note to say THANK YOU for this great tutorial. I am not a coder. And I’m not even a web designer. Instead, I’m an online teacher that loves Divi for my pages and course sites.

    I used this technique to highlight some of the features for the community building site I am creating (will publish later today). Your instructions were clear. Then I played around to change the color and adapt for my needs.

    Kudos to you! I am very appreciative.

    Reply
    • Tim Strifler

      That’s so great to hear, Susan 🙂 Thanks so much for your kind words!

      Reply
  21. Sarah Stone

    Hi Tim,
    This has all worked great – thank you for the great tutorial!
    The only thing which isn’t working is the hover colour background on mobile (it stays purple when I want it to go red). Is there something I missed?
    Thanks
    Sarah

    Reply
    • Tim Strifler

      You’re welcome! Try doing a search for the purple color in your CSS – rgba(161, 83, 224, 0.9) and then replace it with your desired color. Because if it’s showing then the color is in the code somewhere 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

We're creating more tutorials!

Subscribe and we'll notify you when we publish more tutorials and blog posts similar to this. :)

 

We protect your email & never spam.

You have Successfully Subscribed!