Skip to main content

How To Make The Title Appear Over The Image On Hover

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
.title-image-hover .et_pb_de_mach_title,
.title-image-hover .et_pb_db_product_title,
.title-image-hover .et_pb_df_title {
position: absolute; /* Move ontop of image */
top: 50%; /* Position in center vertically */
transform: translateY(-50%); /* Position in center vertically */
left: 0;
opacity: 0; /* Hide */
-webkit-transition: all 0.3s ease-in-out; /* Animation to fade in */
-ms-transition: all 0.3s ease-in-out; /* Animation to fade in */
transition: all 0.3s ease-in-out; /* Animation to fade in */
width: 100%
}
.title-image-hover:hover .et_pb_de_mach_title,
.title-image-hover:hover .et_pb_db_product_title,
.title-image-hover:hover .et_pb_df_title {
opacity: 1; /* make visible when you hover over the section */
}

Step 4: Customize The CSS​

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

Last updated on