I’ve been meaning to make some small changes to it for a while, it has problems when there is a lot of text & sometimes it’s better to display some of the text before hovering. Instead of writing a tutorial I thought I’d just make up some layout files that will be easier to import into your own sites.
So here they are in one handy zip file with demonstrations below. To import the layouts, unzip the download, go to Divi > Divi Library > click Import & Export > Import tab > upload the .json file. It contains the 4 layout below. All the layouts are rows so to add them to your page click Add Row > Add from Library.
Image hover layout
This layout uses blurb modules to handle the image, heading, text and link. It will work with any amount of columns and column spacing but you might have to adjust the text size and position if it’s too crowded.
This is the blurb module title
& this is the blurb module text
This is the blurb module title
& this is the blurb module text
This is the blurb module title
& this is the blurb module text
Image hover layout with title
The same as the above layout but by adding the class ‘show-title’ to the row is will display as below.
This is the blurb module title
& this is the blurb module text
This is the blurb module title
This is the blurb module title
Image hover gallery layout
This layout uses the gallery module to display the images. It will work with any amount of images and uses the image title and caption fields for the text.
This is the image title
This is the image title
This is the image title
This is the image title
Image hover gallery layout with title
The same as the above layout but by adding the class ‘show-title’ to the row is will display as below.
This is the image title
This is the image title
This is the image title
This is the image title
Thanks for reading!
If you found this post helpful you can show your appreciation by leaving a review on the Yates Design Facebook page:
If you need help…
I am available for hire! No matter how big or small your project is, I’d love to hear about it. All quotes are obligation free.
Drop me an email at hello@yatesdesign.com.au to discuss.