1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Hover effects on entire Text Module?

Discussion in 'Free Divi Community Forum' started by chris r, Jul 30, 2019.

  1. chris r

    chris r Member

    Hi,

    I have a Text Module I added in Divi. It's the width of one column in a 3-col layout and has just a hyperlink to the left of a .jpg of a right arrow all over a white background, e.g.

    EXPLORE ->

    I'd like to be able to allow the user to hover over the entire block, not just the hyperlink. I found how you can do this in the Module Link section.

    However, also, I'd like to be able to, when hovering, change out the image of the arrow to one of the same size, just a different color, and add a bottom-border 3px tall on the bottom of the entire block.

    Can this be done? Thanks, new to Divi, any help appreciated...
     
    #1 chris r, Jul 30, 2019
    1. PRO MEMBER PERKS Divi Mini Cart Pro Plugin - Instantly add 3 different types of mini cart to your Divi site:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    You should be able to do that with the border settings in the text module. See screenshot below:

    upload_2019-7-31_10-58-13.png

    Is your image built with HTML img tag in the text module? If that's the case, it would require custom CSS to achieve that.

    You might want to input 2 img tag in it. And set the hover one to have display: none; CSS. Then add CSS Class to the text module & img tag, so that you can target both the img tag when hovering the text module. And lastly add necessary CSS to show or hide it using display: block; & display: none;
     
    #2 Divi.Help, Jul 30, 2019
  3. chris r

    chris r Member

    Thanks so much for this! I do have the img tag in HTML in the text module.
     
    #3 chris r, Jul 31, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
(You must log in or sign up to post here.)