Divi layout – Image hover effect

Jul 3, 2017

The image module hover effect tutorial has been far & away the most popular post on yatesdesign.com.au. Adapted from Codrops’ “Ideas for Subtle Hover Effects” it’s a nice way to display links and images.

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 text

This is the blurb module title

& this is the blurb module text

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.

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.

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.

Like this post? Subscribe!

Like this post? Subscribe!

Sign up to the Yates Design newsletter & receive news, tips & tricks about how to improve the online presence of your business.

You have Successfully Subscribed!

Pin It on Pinterest