Divi Image Hover Effect Layout Pack (FREE)
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. 🥳
UPDATE: Do you want to create this type of image hover effect with a super easy module? We recently launched Divi Modules Pro plugin that includes our awesome Divi Hover Box module. You can quickly (& easily) create awesome image hover effects with captions and gorgeous animations without having to touch code.
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!
LIVE at Jenkintown, PA (Right outside of Philly)
Hey Fred, thanks for watching!
Reply, as per email 11-13-20
Awesome, thank you Frank!
I’ve marked this weekend as Divilife catch up. Watching the replay from Coventry UK
That’s awesome 🙂
Replay from Tryon, NC. What a great series! Thanks
Glad you’re enjoying it, Sue 🙂
Replay, from France. Nice video thank you !
Thanks for watching 🙂
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
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).
Hey Tim,
Thanks for that pointer! I’m off and running. 😉
You’re welcome 🙂
Replay – New Jersey USA
Thanks, Mickey!
Replay from Ottawa, Canada
Thanks Patrick for watching!
How can I change or modify some of the effect? Like changing to colour of the lines or the size of the lines?
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).
Replay – Denver, CO. Thank you for this! I do have a question, though. I cannot seem to affect the white box that appears in the overlay anywhere in the code module. I would like to remove them altogether. Do you have a simple explanation on how to achieve this? Again, thanks Tim!
Look for background: #fff; in the custom CSS (code modules). Then simply remove that line. That’s it 🙂
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?
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. 🙂
Replay, Highfields Qld Australia. 🙂 Thank you <3 love your work.
Thanks so much, Helen 🙂
Hi, Great pack thanks very much! One question is that on mobile the whole module becomes clickable so as someone scrolls down the page as soon as they touch the blurb module (Its the blurb hover pack) it goes straight to the link in question. I have tried to make just the title as the link but it still makes the whole module clickable? Any help would be great thanks 🙂
Did you remove the module link from the blurb?
How would you move the text closer to the top of the picture?
You can play around with the CSS code and fine tune the positioning that way.
Thank you Tim. How can I have just three gallery images fill the section?
You should be able to do it if you only have three gallery images set. You will need to adjust the width in the CSS though as well.
Thanks for the video Tim reply :Byford, Western Australia
You’re welcome! 🙂
Hi, Thank you for your work.
The files comes in my download folder as a .json but import in the Divi Library won’t work. Am I doing something wrong ? I also tried to import via page.
Thank you for the demo.
Sometimes the Library Import in Divi can fail. It also depends on your hosting. I’d recommend trying it again. Also make sure all the lights are green for the hosting requirements within the Divi Support center on your website. If your hosting isn’t allocating enough resources then it can definitely keep importing from working properly.
Hi, Thank you for your plugin.
You’re welcome 🙂