hover tile example

Tiles display with a crisp dark overlay to make the titles easy to read, and helps all your images to match together. On hover they light up, giving extra animation on your site.

Another live example is on http://effectiveconsultancy.com.au.

insert hover tile module from divi page builder

Hover Tile Module

Unlimited Site License

Add an image, title and optional subtitle. This module takes care of an animated hover. Looks great in a grid. This is a really easy way to add some unique polish to your website, without needing to know code or CSS.

Feeling bolder with your CSS knowledge? You can certainly alter the display of this module with ease to create even more unique effects.


*Compatible with the Divi Theme Page Builder and Elegant Themes Page Builder Plugin. Not editable with the "Visual Builder".

Installation Instructions
  1. You always need the Module Extender For Divi plugin installed on your WordPress site for the module to work.
  2. Upload the zip file to your Child Theme's modules folder. [Using FTP or File Manager, go to WP-Content > Themes > Divi-child > modules.] You will need to create a folder called "modules" the first time. The child theme can have a different name to these instructions, so long as it is your current child theme folder. Note: It is case sensitive, must be lower case "modules".
  3. Unzip the file so the unzipped module folder is in /wp-content/themes/Divi-child/modules/
  4. You can delete the zip file just to keep things tidy.
  5. Be sure to refresh your Page Builder page.

That's it! The new module will be in the list when you click "Insert Module" in the Divi Page Builder.

Editing this module is familiar to anyone using Divi Page Builder.

Enter a Title and Sub-text, much like a full width header module:

Hover Tile Module Editing Options 1

You will have to be careful with the number of character used. Shorter sub text does make for a better mobile responsive version. Of course, you can hide on mobile if the text is essential.

Hover Tile Module Editing Options 2

The tile will adjust to the size and aspect of the image (until it is full width in the available column. When using in a grid, you will need to crop the images to the same pixel ratio in order for it to display uniformly