1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, 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

Solved Divi Slider/Image with text and button

Discussion in 'Free Divi Community Forum' started by Maecy, Jul 15, 2019.

  1. Maecy

    Maecy Member

    Hello, I was wondering if it is possible to have something like this:

    Screen Shot 2019-07-15 at 4.13.18 PM.png

    What I did is, I added a code module and set the background image. But I am wondering how can I place my text and button at the bottom of opposite sides?

    For the second one, I was wondering if I can customize the slider buttons to look like this:
    Screen Shot 2019-07-15 at 4.13.34 PM.png


    And lastly, for the animation, I want the image to zoom on hover without the image actually changing size, I just want the zoom effect to happen inside the image itself.

    Ref: http://dev-ws9ehmj5qz8ahxzmlb.thegate.ae/home/
     
    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    You might want to try to add a text module & a button module, instead of the code module. Then add the image as a column background image.

    Then use float: left; for the text module & float: right; for the button module.
    Try the below CSS in Divi > Theme Options > Custom CSS. Adjust the value to fit your need.
    Code:
    Log In or Sign Up to view this code.
    Go to the row settings > column 1 > Advanced & set overflow settings to be hidden.
     
  3. Maecy

    Maecy Member

    The arrows for the slider is working perfectly now, Thank you!

    And as for the second one, I didn't know I could still set the background for each column in a row, so thank you for that. But so far this is what I got:

    Screen Shot 2019-07-16 at 9.30.09 AM.png

    Plus, the animation was okay on the first version of this when the image was in the background of the module but now that it is now in the background of the column, it's getting bigger again.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade floating button design for your Divi site without using any plugins:View Demo
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
  5. Maecy

    Maecy Member

    Now it looks like this:

    Screen Shot 2019-07-16 at 1.03.19 PM.png

    I want it to look like this:
    Screen Shot 2019-07-16 at 1.03.53 PM.png
     
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    The only way to set the background image to zoom on hover is to utilize the background size CSS. Seems like it's not working fine on your case. So, you can't have the hover effect on the column background image.
     
  7. Maecy

    Maecy Member

    Thank you so much for your help!
     
    1. PRO MEMBER PERKS Divi.Help One-Page Layouts - Beautifully crafted one-page Divi layouts just for you:View All Layouts
  8. coolkiller

    coolkiller New Member