1. HOT Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
HOT Divi Login Customizer Plugin - White-label your Wordpress login page for your Divi site.
View premade login page design
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.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Zoom effect on background image

Discussion in 'Free Divi Community Forum' started by gaetan, Jul 22, 2019.

  1. gaetan

    gaetan Member
    Pro Member

    Hello,
    I would like to know how to keep the image in the frame when the mouse moves over the image?
    http://maraisdesaone.ovh/

    Look at the screenshots ;) Thanks
     

    Attached Files:

    #1 gaetan, Jul 22, 2019
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add custom vertical navigation for your Divi site. Turns into slide in menu on mobile:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    You can try go to the Row settings > first column settings > Advanced > Custom CSS > Main Element & add overflow: hidden!important;

    Though, it will only hide the elements that expand over the column: top, left & right, but not bottom. This is because the bottom has another module within the same column.
     
    #2 Divi.Help, Jul 22, 2019
  3. gaetan

    gaetan Member
    Pro Member

    Thanks for the reply.
    Yes, you're right...
    So how can I have the desired effect? (look screenshot)
    (Above the modifications I ask for, there is the same thing with images, it works fine, but I want to add text...)
     

    Attached Files:

    #3 gaetan, Jul 22, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    I see you use a hack of 2 rows + negative margin to achieve that.

    Other hack would be using image module + text module (negative margin to lay on top of the image module). Just a thought.
     
    #4 Divi.Help, Jul 22, 2019
  5. gaetan

    gaetan Member
    Pro Member

    Yes, I already tried that, but the responsive was not well.
    With my hack it's okay, just in responsive mode one of the picture just disappear and I don't know why. Any suggestions ?
     
    #5 gaetan, Jul 22, 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. gaetan

    gaetan Member
    Pro Member

    I found the problem. Nevertheless, in responsive, when I reduce the window, there is a small bug, how to fix it?
    Look at the screenshot, thank you ;)
     

    Attached Files:

    #6 gaetan, Jul 22, 2019
  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    That happens when the text break into two lines, which caused the text module to have a taller height.

    upload_2019-7-22_22-43-39.png

    What you can do is go to each text module settings & set a height for them:

    upload_2019-7-22_22-47-13.png

    You can check the current height using the inspect element tool:

    upload_2019-7-22_22-48-12.png
     
    #7 Divi.Help, Jul 22, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
  8. gaetan

    gaetan Member
    Pro Member

    Yes, thanks it works fine ;)
    Thanks a lot !
     
    #8 gaetan, Jul 22, 2019
(You must log in or sign up to post here.)