1. BLACK FRIDAY 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.

  1. Divi.Help

    Divi.Help Administrator
    Staff Member

    Attached is free json file for Divi Text Hover Overlay Image section. We utilize the new Divi hover options to achieve this text over image hover effect.

    You need to log in / register to download this .json file.

    For installation, you just need to upload the .json file to your Divi Library. And add a new section & load it from library. That's it.
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Mini Cart Pro Plugin - Instantly add 3 different types of mini cart to your Divi site:Learn More
  2. Rubb Fox

    Rubb Fox New Member

    Found this on search, but do not understand how to use it
     
  3. Divi.Help

    Divi.Help Administrator
    Staff Member

    Just download the .json file & go to Divi > Divi Library > Import & Export > Import the .json file.

    Then, just go to edit your pages & Add New Section > Add From Library > Text hover effect & done.
     
    Zuzanna likes this.
    1. PRO MEMBER PERKS Divi Powerful Child Theme - Power up your Divi sites with tons of new functionalities & premade elements:Learn More
  4. Rubb Fox

    Rubb Fox New Member

    Thanks for the answer, I new at Divi.
    I do not see it, I click "Standard Section" then "Add from Library" I have select showing "All Categories" and this text "You have not saved any items to your Divi Library yet. Once an item has been saved to your library, it will appear here for easy use."
    I added images of the Layouts pages and the page I editing
     

    Attached Files:

  5. Divi.Help

    Divi.Help Administrator
    Staff Member

    I see you're using the old Divi backend builder. If that's the case, you don't have to click Standard Section. Just click Add From Library will do.
     
    Rubb Fox likes this.
    1. PRO MEMBER PERKS Divi Powerful Child Theme - Power up your Divi sites with tons of new functionalities & premade elements:Learn More
  6. Rubb Fox

    Rubb Fox New Member

  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  8. Rubb Fox

    Rubb Fox New Member

    Thanks. any other ways?
     
  9. Divi.Help

    Divi.Help Administrator
    Staff Member

    You can try to go to the CTA module settings > Design > Body Text > Body Text Size & set the size to be 1px & hover size to be 14px. And adjust the padding top to fit it properly.

    Though, the hover animation won't be that smooth.
     
    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
  10. Brandon Winters

    Brandon Winters New Member

    are you able to "lessen" the amount of hover animation? i.e I would like to decrease the amount of height that is covered with the hover.
     
  11. Divi.Help

    Divi.Help Administrator
    Staff Member

    The height is determined by the padding of the CTA module. Try to adjust the hover padding.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  12. SarahBoyd

    SarahBoyd New Member

    Hi,

    I tried doing this just now. Importing the JSON file via the Wordpress importer.

    Wordpress gave the following error code:

    Sorry, there has been an error.
    This does not appear to be a WXR file, missing/invalid WXR version number

    Any ideas?

    I'd love this function.

    Cheers,
    Sarah
     
  13. Divi.Help

    Divi.Help Administrator
    Staff Member

    You should import the .json file in WP Admin > Divi > Divi Library > Import / Export
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More
  14. Jon Pearce

    Jon Pearce New Member

    Hi,

    any idea why when i change the background color, the hover color stays the same (e.g. changed background to yellow, but hover is purple), I can't see what to change this. Otherwise it works great!

    thank you.
     
  15. Divi.Help

    Divi.Help Administrator
    Staff Member

    Yasmine Latch likes this.
    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  16. Getonline

    Getonline New Member

    So I've tried a few times to change the 'hover effect' colour without success on the 'text-hover-effect.json' module... Any tips here?
     
  17. Divi.Help

    Divi.Help Administrator
    Staff Member

    You just need to change the background hover color. See screenshot below:

    upload_2019-10-9_10-47-49.png
     
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  18. Getonline

    Getonline New Member

    Thanks, I don't use the Divi 'visual builder' (absolutely hate it) so that makes sense why i didn't have the 'hover' options... cheers
     
  19. 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

    Not sure why, but my text will not stay in the middle of the image. Any ideas? It jumps to the middle on hover but I need it just to be in the middle the entire time. Actually I don't even need the on hover shift up of the image. I just need 5 columns each with an image and 1 word text over the image that I use a background color with. Maybe there is another option besides this one? Screen Shot 2019-10-29 at 11.09.58 AM.png
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  20. Divi.Help

    Divi.Help Administrator
    Staff Member

    You will need to go to the module settings & adjust the padding and hover padding to be the same.