All Collections
Divi Documentation
How to replace the Image module's hover overlay Icon with Text
How to replace the Image module's hover overlay Icon with Text

Replace the Image's overlay icon with a plain text

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

Using custom CSS code, we can replace the Image module's overlay icon with plain text.

  1. Insert the image module into the page layout and make sure that the Open in Lightbox option is enabled

    Open Image in Lightbox

  2. From Design Tab > Overlay, enable the Image Overlay option

    Enable Image Overlay

  3. Set the Overlay Icon color. This will be the color of the plain text as well. Make sure you choose a good color that will offer a high contrast with the Hover Overlay Color

    Set Overaly Icon color

  4. Set the Hover Overlay Color

    Set the Hover Overlay Color

  5. In the Advanced Tab, locate CSS ID & Classes, and enter divi-im-text-overlay as a custom CSS class. This class will be utilized in the CSS code later on.

    Set custom CSS class on the Image module

  6. Finally, proceed to Divi > Theme Options > General Tab > Custom CSS, and input the provided CSS code:

    .divi-im-text-overlay .et_pb_image_wrap .et_overlay::before {
    content: "View Article";
    font-family: inherit !important;
    font-size: 24px;
    line-height: 1.3em;
    text-align: center;
    transform: translateX(-50%) translateY(-50%);
    margin-left: 0px;
    width: 80%;

The result

Note: In the above CSS code, you can change the text that is being displayed by editing the content property and changing the View Article text.

Did this answer your question?