How To Make The Title Appear Over The Image On Hover

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to make the post title appear on the image on hover.

Preview

Step 1: Create the Loop Layout

Create a Custom Loop Layout in the Divi Library adding the Thumbnail and Post Title modules. Then add a CSS class name to the Divi Section. In this example, I add the CSS class "title-image-hover" to the Divi Section.

Step 2: Set Up The Archive Module

Step 3: Add Custom CSS

Add this custom CSS to Divi > Theme Options > Custom CSS and it will do the following.

1. Hide the title
2. Move the title on top of the image
3. Make it appear ONLY when you hover

Step 4: Customize The CSS

Customize the text how you want (in our case we make the font colour white)

More Support?

Please email us at [email protected] if you are unable to get your Divi plugin working.