1. HOT 2019 Cyber Monday Bundle Sales @ Divi.Help - 72% OFF: https://black-friday-2019.diviultimate.com/

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

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

  1. Adrienne

    Adrienne New Member

    Brilliant! Thank you so much. Worked as it should.
     
  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!
     
  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?
     
  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
     
  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.
     
  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
     
  7. vannquish

    vannquish New Member
    Divi Ultimate Header Plugin

    Is it possible to include a button below the text on hover?
     
  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;
    }
     
  9. vannquish

    vannquish New Member
    Divi Ultimate Header Plugin

    Brilliant thank you
     
  10. vannquish

    vannquish New Member
    Divi Ultimate Header Plugin

    Could this possibly affect all other buttons on the website?
     
  11. Divi.Help

    Divi.Help Administrator
    Staff Member

    It will only affect the module that you added the CSS Class: dh-button-on-hover
     

Recommended Divi Hosting