Divi Image Hover Effect Layout Pack (FREE)

by | Nov 12, 2020 | DIVEMBER, Divi Tutorials | 24 comments

Welcome to D I V E M B E R (Divi + November) here at Divi Life! All month long during November we’re going LIVE on Facebook & YouTube, and publishing new tutorials, freebies, new product features, new product releases, and more! Make sure you subscribe to our email list so you don’t miss any of the action or awesome free stuff! And, follow us on Facebook & YouTube to be notified when we go LIVE.

Back in 2016 when I launched Divi Life, the very first of my Divi tutorials was on how to create images with animated hover effects in Divi.

It was a great tutorial and received tremendous feedback. The only problem is that Divi was a lot less capable back in 2016. So the tutorial was essentially 100% custom code within the Divi code module.

So now we’re circling back with another Divi freebie for Divi image hover effects with animated overlays 😍

This time, the image hover effects are built with Divi modules (plus some custom CSS). And you can simply download and import the layout and to your site. 🥳

Pretty awesome, huh!? 

We have some epic tutorials and freebies lined up all month long for DIVEMBER! But if you have any tutorial or freebie requests, let us know in the comments below!

24 Comments

  1. Avatar

    LIVE at Jenkintown, PA (Right outside of Philly)

    Reply
  2. Avatar

    I’ve marked this weekend as Divilife catch up. Watching the replay from Coventry UK

    Reply
  3. Avatar

    Replay from Tryon, NC. What a great series! Thanks

    Reply
    • Avatar

      Glad you’re enjoying it, Sue 🙂

      Reply
  4. Avatar

    Replay, from France. Nice video thank you !

    Reply
  5. Avatar

    Hi Tim,
    I love the effects! I’m working on using it on an existing site. I created a page using the layout and saved the “Title On Hover” module to my Divi Library. However, when I try to add that module, from the Divi library, to my existing page it’s not available.

    It seems to only be available when adding it to a page created using the page layout that I downloaded from your site. Is that the way it works.

    Thanks!!! Lee

    Reply
    • Avatar

      Hey Lee,

      You need to import the .JSON file to the Divi Library. Once you do that, you can add the Rows from Library (Add New Row, Add From Library).

      Reply
      • Avatar

        Hey Tim,
        Thanks for that pointer! I’m off and running. 😉

        Reply
  6. Avatar

    Replay – New Jersey USA

    Reply
  7. Avatar

    Replay from Ottawa, Canada

    Reply
  8. Avatar

    How can I change or modify some of the effect? Like changing to colour of the lines or the size of the lines?

    Reply
    • Avatar

      Hi Ralf,

      Those customizations can be done in the CSS. If you open the code module within the row layouts, you’ll find the custom CSS. You can scroll through and see the colors and update accordingly. For the size of the lines, you’ll customize the :after CSS (border-left, border-right).

      Reply
  9. Avatar

    Replay: Victoria, BC. Love this module. I notice though that if I duplicate a module (to appear below) the hover effect applies to all gallery items underneath the original…in that they all show the text when I hover over the first one in the column. Is this correct? Is there another way to add additional gallery images so that they hover individually?

    Reply
    • Avatar

      Hi Lisa, I’m assuming that’s because the CSS would then be duplicated, so the hover is showing on both modules since the CSS is the same. But if you add new gallery images within the same module, it will work correctly. 🙂

      Reply
  10. Avatar

    Replay, Highfields Qld Australia. 🙂 Thank you <3 love your work.

    Reply

Submit a Comment

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

Pin It on Pinterest

Share This