1. CYBER MONDAY SALES Up to 72% OFF our Pro membership & access all our premium Divi plugins, child themes, layout packs & Divi Block.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites.
View All Pro Layout Packs
BEST Divi Block - An online drag & drop tool to easily mix & match 478+ premade blocks (light / dark version), including custom header, fullscreen / slide in mobile menu, mega menu, custom footer, page design blocks & 14+ Special Module Design. Newly added Divi Preloader without plugin.
Learn MoreTry Free Version

Divi Text Hover Overlay Image section (Free .json file)

Discussion in 'Divi Freebies For Download' started by Divi.Help, Dec 17, 2018.

Page 2 of 3
  1. Adrienne

    Adrienne New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Brilliant! Thank you so much. Worked as it should.
     
    #21 Adrienne, Oct 30, 2019
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  2. RetriLes

    RetriLes New Member
    Divi Ultimate Blog Plugin

    Thanks for creating this! It's exactly what I'm looking for. A few questions, if you could help me out. I'm completely new to WP, so apologies if these questions have very obvious answers.

    1. The content added to the library is a section and not a module. So when I add a new section is comes 2x2 by default, but when I attempt to add a 3rd column there's no hoover text module to add? Tried the "save module" and "insert module" method from one of the pre-existing ones, but then all changes are reflected across them all.

    2. Tried to figure out your advice for the padding of making the hoover texts squares (question Adrienne had right above), but I'm at a loss.

    Love the work, though, and I'm really appreciative!
     
    #22 RetriLes, Nov 14, 2019
  3. RetriLes

    RetriLes New Member
    Divi Ultimate Blog Plugin

    Update: Figured out a workaround for #1, so I'm all good there. However, ran into a new problem (probably associated with #2) where when changing the amount of text changes the corresponding size of the image?
     
    #23 RetriLes, Nov 14, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Yup. Basically the text is set to be transparent, but it will still take up the spaces below.
    upload_2019-11-14_22-23-21.png
     
    #24 Divi.Help, Nov 14, 2019
  5. Steven Wolff

    Steven Wolff New Member

    how or where do I download the free json image overlay? There is no download links. I have signed up and logged in.
     
    #25 Steven Wolff, Nov 18, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    It's the end of the first post. See screenshot below:

    upload_2019-11-19_11-30-15.png
     
    #26 Divi.Help, Nov 18, 2019
  7. vannquish

    vannquish Member
    Divi Ultimate Header Plugin

    Is it possible to include a button below the text on hover?
     
    #27 vannquish, Nov 19, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade before / after image slider for your Divi site without using any plugins:View Demo
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    It's a call to action module. So you can just edit the module settings & add a button in it.

    But the issue is with the hide/show button on hover. To do that, you will need custom CSS.

    1. First, go to the CTA module > Advanced > CSS Class & add dh-button-on-hover
    2. And paste the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .dh-button-on-hover .et_pb_button {
    opacity: 0;
    transition: all 0.3s ease!important;
}
.dh-button-on-hover:hover .et_pb_button {
    opacity: 1;
}
     
    #28 Divi.Help, Nov 19, 2019
  9. vannquish

    vannquish Member
    Divi Ultimate Header Plugin

    Brilliant thank you
     
    #29 vannquish, Nov 20, 2019
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  10. vannquish

    vannquish Member
    Divi Ultimate Header Plugin

    Could this possibly affect all other buttons on the website?
     
    #30 vannquish, Nov 21, 2019
  11. Divi.Help

    Divi.Help Administrator
    Staff Member

    It will only affect the module that you added the CSS Class: dh-button-on-hover
     
    #31 Divi.Help, Nov 21, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
  12. Chieyine

    Chieyine New Member

    Hi,
    Any idea why the text overlay hover image appears on all pages on my website on mobile view.

    I added it to the hompage but saw it on all my pages on mobile view but not on desktop view.

    The url is https://chivelschools.com/

    Thanks
     
    #32 Chieyine, Jan 11, 2020
  13. Divi.Help

    Divi.Help Administrator
    Staff Member

    I see that it's showing on both desktop & mobile view.

    But somehow it's showing on all pages, outside of the content area. Perhaps you're using a Divi Footer plugin to display it globally.
     
    #33 Divi.Help, Jan 11, 2020
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
  14. Chieyine

    Chieyine New Member

    Thanks a lot

    Just remembered i did the settings.

    Thanks a lot
     
    #34 Chieyine, Jan 11, 2020
  15. Jen Smith

    Jen Smith New Member

    Is there a way to change the end animation of the text upon hover? It continues to jump to the top of the image when I want it to stay centred, even though I've adjusted the top-padding to stay in place.
     

    Attached Files:

    #35 Jen Smith, Feb 24, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade rolling text design for your Divi site without using any plugins:View Demo
  16. vannquish

    vannquish Member
    Divi Ultimate Header Plugin

    Is it possible to have the text aligned bottom and stay bottom on hover? At the moment when a user hovers over the image, the text appears higher and blocks the image below.
     
    #36 vannquish, Feb 25, 2020
  17. Divi.Help

    Divi.Help Administrator
    Staff Member

    Make sure you set the hover padding top value to be similar to your padding top.

    upload_2020-2-25_17-24-5.png

    The position of the hover text is based on the hover padding set. Just go to the module settings & change the hover padding value.
     
    #37 Divi.Help, Feb 25, 2020
    Jen Smith likes this.
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  18. Jen Smith

    Jen Smith New Member

    Thanks for replying, I've done this and it is still jumping to the top of the box? could it be the custom CSS is overriding it?
     
    #38 Jen Smith, Feb 25, 2020
  19. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
    #39 Divi.Help, Feb 25, 2020
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  20. vannquish

    vannquish Member
    Divi Ultimate Header Plugin

    I would like the title text (not hover) to display towards the bottom of the box, but when hovered over, the text would slide up as it does now. at the moment to title text appears in the middle of the box but this needs changing to be around 15px from the bottom. can you help?
     
    #40 vannquish, Mar 4, 2020
(You must log in or sign up to post here.)
Page 2 of 3