1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
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 3 of 3
  1. Divi.Help

    Divi.Help Administrator
    Staff Member

    It's a bit tricky as there are content below the title.

    You can try:

    1. Go to the CTA module settings > Advanced > CSS Class & add dh-title-bottom

    2. And try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .et_pb_promo.dh-title-bottom .et_pb_promo_description {
    top: 75px;
    transition: all 0.3s ease;
}
.et_pb_promo.dh-title-bottom:hover .et_pb_promo_description {
    top: 0!important;
}
    **Adjust the top value to fit your need.
     
    #41 Divi.Help, Mar 4, 2020
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members:View Demo
  2. vannquish

    vannquish Member
    Divi Ultimate Header Plugin

    Ill give that a go no. thanks
     
    #42 vannquish, Mar 5, 2020
  3. Berrabah

    Berrabah New Member

    Hello,
    Thanks for this overlay effect. I have only one small problem: how to remove the text animation on hover >>> The tittle appears, but the text appears only when I pass the cursor over it. I would like it to appear without animation, fixed. thank you in advance
     

    Attached Files:

    #43 Berrabah, Apr 24, 2020
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    It seems like Divi changed the body text hover. Previously, when you hover the box, the text will appear. But now the text will only appear if you hover the text itself. There's no other built-in option to alter that anymore.

    But if you want the text to show up without hovering, try to go to the Body Text color & set it to be white. And adjust the padding to suit your need.
     
    #44 Divi.Help, Apr 25, 2020
  5. Yasmine Latch

    Yasmine Latch New Member

    #45 Yasmine Latch, Apr 29, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    You can only change the background color opacity. Not the background opacity. See screenshot below:

    upload_2020-4-29_20-45-13.png
     
    #46 Divi.Help, Apr 29, 2020
  7. Leonie Skelton

    Leonie Skelton New Member

    Hi There .. Is there any way to keep the height of the boxes the same when scaling in a browser? Equalize column height doesn't have any effect. I have kept the body text roughly the same so it's fine when full screen (stays at 3 lines), but looks messy when scaling. Many Thanks for the file .. it was just what I was looking for
     

    Attached Files:

    #47 Leonie Skelton, Jun 4, 2020
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Digital Marketing' Divi layout for all Pro members:View Demo
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    After set the equalize column height for the row settings, you also need to go to the CTA module settings & set the height to be 100%.
     
    #48 Divi.Help, Jun 4, 2020
  9. Leonie Skelton

    Leonie Skelton New Member

    Thank You so much - that works perfecly
     
    #49 Leonie Skelton, Jun 4, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade card carousel design for your Divi site without using any plugins:View Demo
  10. Leonie Skelton

    Leonie Skelton New Member

    Hi there .. have found another couple of issues which I’d be extremely grateful if you could help me with if possible. I have the height set to 100% which works fine unless the title is too long. Is there any way to keep the height uniform with the rest of the row when this happens?

    Also, I often need to have columns with nothing in, but when the cursor enters the empty area, the height of the other modules in the row shrink. I have tried to put an ‘invisible’ blank copy of the module in this space but can’t stop it from happening. Is there anything I can do to correct this?

    I have attached a screenshot to illustrate

    Many Thanks in advance for your time

    Leonie
     

    Attached Files:

    #50 Leonie Skelton, Jun 17, 2020
  11. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
    #51 Divi.Help, Jun 17, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  12. paulb99

    paulb99 New Member

    Hi, I have installed the text over file and it appears within divi library, however I am unable see this within the builder to add as a section. Can you possible offer some guidance?

    Many thanks
     
    #52 paulb99, Jun 21, 2020
  13. Divi.Help

    Divi.Help Administrator
    Staff Member

    See if the Divi Library has the below & the type is section:
    upload_2020-6-21_17-48-29.png

    Then Add a new section> Add From Library > Text hover effect:

    upload_2020-6-21_17-51-1.png
     
    #53 Divi.Help, Jun 21, 2020
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Freelancer' Divi layout for all Pro members:View Demo
  14. Kenny McLEan

    Kenny McLEan New Member

    Is there any way to force the hover text to be in the centre of the image?
    I have tried adjusting the padding and I can get it close enough, however, there is different amounts of text on each image so I would have to do this by trial and error on all my images.

    https://ckps.org.uk

    Thanks
     
    #54 Kenny McLEan, Jun 27, 2020
  15. Divi.Help

    Divi.Help Administrator
    Staff Member

    Yup. You will need to adjust the padding to make it look centered.
     
    #55 Divi.Help, Jun 29, 2020
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  16. Kenny McLEan

    Kenny McLEan New Member

    OK, Thanks.
    I've got too many images to do that with.
     
    #56 Kenny McLEan, Jun 29, 2020
  17. blackmonday

    blackmonday New Member
    Divi Block Pro

    Just to let you know, I have the latest Divi Builder and this free .json file doesn't work. It installs fine and in the appears to be okay in the Divi Library, however, when you go to page and Add From Library it's no where to be found with the following message displayed:

    "You have no saved any items to your Divi Library yet. Once an item has been saved to your library, it will appear here for easy use."

    Unfortunately, this library item does not appear. :(
     
    #57 blackmonday, Jul 19, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  18. Kenny McLEan

    Kenny McLEan New Member

    What version of Divi are you running?
    I'm using Version: 4.5.1 and this works fine for me.
     
    #58 Kenny McLEan, Jul 19, 2020
  19. Enrike

    Enrike New Member


    Hi, I'm new, and I'm trying to achieve to put the button, the goal is to be visible always, and I tried moving the options that appear on the CTA for the button, and later tried to put the Custom CSS so at least be visible on hover, but the button doesn't appear and I don't seem to find it.

    Any clue? Thanks in advance.
     
    #59 Enrike, Aug 12, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade floating button design for your Divi site without using any plugins:View Demo
  20. Emptymind

    Emptymind New Member

    I am trying to use your library layout - and willing to buy an extension to do this also - look at a website I built with wpbakery - https://www.emptymindfilms.com - on all the footers I have a gallery that has title text on hover and the image links to a page or post (not lightbox). Is this possible? One problem is to put my images or gallery in the 3rd column of one row in the footer - see my staging site - http://l4c.f52.myftpupload.com/photo-gallery/
    Thanks
     
    #60 Emptymind, Dec 26, 2020
(You must log in or sign up to post here.)
Page 3 of 3