To achieve this, place an image module in your Divi layout and be sure to add a link. Using an Image in the Text Editor to Trigger a Divi Overlay. Staff Member. Then, change “.overlay-one:after {” to “.overlay-one:before {” and change “.overlay-one:hover:after {” to “.overlay-one:hover:before {” in … This plugin adds a new Module in your Divi Builder. The module allows you to add text on top of images. Image Intense Plugin. The Divi theme from elegant themes is absolutely awesome. HTML and CSS code snippets to include into your HTML page, in WordPress native editor or in a page or theme builder like Divi. I used that for a client website and in firefox it works very well. You can set the transition duration for the overaly effect in the module settings. Add the CSS class “pa-button-over-image” to the Advanced Tab>CSS ID & Classes>CSS Class. Add dimensions of the image to the container, and set its position to relative Set overlay position to absolute and position it by top/bottom and left/right properties share | improve this answer | follow | The text will appear and reveal itself when you hover an image. Hey Geno, thanks for the fantastic tutorial. A new module is added to the Divi Builder, so there’s no need to copy and paste code. Attached is free json file for Divi Text Hover Overlay Image section. (OPTIONAL: I toggled on the image overlay in the design tab and set the icon to transparent and the overlay to a 50% black.) Choose the image size, hover style, and opacity. Page 1 of 3 1 2 3 Next > Divi.Help Administrator. Note: I'm still developing this tip, so it hasn't been tested extensively and isn't yet available as an option in Divi Booster.. This is a plugin that mixes 3 modules and adds 22 overlay and hover effects to images, text, and buttons. Suppose you start with a full-width slider with a background image and some text, similar to that shown in the featured image above. 3. There are two hover effects to reveal the text Fade and Slide. Here's a quick tip for positioning the slide text on individual slides with the Divi Theme's full width slider.. Image overlays in HTML/CSS only: text superposition over an image, with image or text change on mouse hover. Here is … The idea is just to overlay some text over an image, but as blocks that stick out from the left with an even amount of padding all the way around the variable-length text. Next, navigate to the page you would like to place the image trigger. Divi Text Hover Overlay Image section (Free .json file) Discussion in 'Divi Freebies For Download' started by Divi.Help, Dec 17, 2018. Divi 3 - Image With Gradient And Text Overlay On Hover. Set the overlay title, caption, and choose the orientation. First, copy the unique CSS ID for the overlay you would like to trigger. To have the overlay image become a link, first add the link to the page you want to visit in the link URL box in the divi image module editor. But if i open the site with Safari, i can see the text overlay but not the transparent area between the background image and the text overlay. The unique CSS ID is found in the column labeled “CSS ID” on the main Divi Overlays page.