Green Orb Web Design

Sep 16, 2020 | wordpress, Divi

Divi Theme: Hovering over background Image to move another module

I have been using the Divi wordpress theme for quite a while now which I find to be an excellent theme but recently I had an occasion to create a hover effect which when the user hovers over a background image it would cause another (child) element to move. Divi has many animation and hover effects but I could not find one for this particular form of parent child animation. However, with a couple of lines of CSS, this effect was fairly straight forward to create.

The section below containing the hover effects can be downloaded and imported to your Divi library.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Glasgow

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Callander

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Culzean

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Glasgow

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Millport

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

I have added the following tutorial on how I created the hover effect using Divi.

Close All
1. Create A Row with Three Columns

  • Facebook
  • Twitter

2. Add a Code Module to Column 1 and enter the following code

  • Facebook
  • Twitter

Enter Code

//Enter this code into code module
<style>
#parent-one:hover .child-one {
transform: translateX(-50%) !important;
}
</style>

  • Facebook
  • Twitter

3. Set Code Module margin top and bottom to zero

  • Facebook
  • Twitter

4. Add a background Image to Column 1 and equalise column heights

  • Facebook
  • Twitter

Equalize Column Heights

  • Facebook
  • Twitter

5. Give Column 1 the CSS ID of parent-one

  • Facebook
  • Twitter

6. Insert a CTA module in Column 1

  • Facebook
  • Twitter

7. Set Min Height of CTA module to 100% and add a button link

Set Min Height

  • Facebook
  • Twitter

Add Button Link
  • Facebook
  • Twitter

8. Give CTA Module a CSS Class of child-one

  • Facebook
  • Twitter

To Create a Left Slide In

Close All
Set The CTA Module Left Padding to 50%
You can increase the Left padding to 52% if you wish a greater padding on the left hand side of your text.

  • Facebook
  • Twitter

CTA Module Set Transform to Translate

  • Facebook
  • Twitter

Turn off Link XY Transform

  • Facebook
  • Twitter

Set DeskTop TransformX to -100% and Hover TransformX to -50%

  • Facebook
  • Twitter

  • Facebook
  • Twitter

Add to Column 1 Custom CSS main element overflow:hidden;

  • Facebook
  • Twitter

The CTA Transitions can be used to set the speed curve, delay and speed of animation.

  • Facebook
  • Twitter

Once you have completed the above instructions you will have a row with three columns and the first column has a background picture which when you mouse over the CTA slides into view.

Basically you repeat this process for the other columns but with slight differences to the written CSS code and the CTA Transforms. I have added the different settings in each of the columns below.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Glasgow

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Callander

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Culzean

Row Column 1

CSS ID parent-one
Add Background Image
Equalize Column Heights
Add overflow:hidden to Custom CSS main element.

Code Module

Margin top:0px Margin bottom:0px
Code Module Code
<style>
     #parent-one:hover .child-one {
        transform: translateX(-50%) !important;
      }
</style>

CTA Module

Min Height CTA 100%
Add a button link
CSS Class child-one
CTA Module Padding Left 50%
CTA Set Transform to Translate
Turn of Link XY
Set Desktop TransformX to -100%
Set Hover TransformX to -50%

Row Column 2

CSS ID parent-two
Add Background Image
Equalize Column Heights
Add overflow:hidden to Custom CSS main element.

Code Module

Margin top:0px Margin bottom:0px
Code Module Code
<style>
     #parent-two:hover .child-two {
        transform: translateY(50%) !important;
      }
</style>

CTA Module

CTA Height 100%
Padding Bottom 50%
Add a button link
CSS Class child-two
CTA Set Transform to Translate
Turn of Link XY
Set Desktop TransformY to 100%
Set Hover TransformY to 50%

 

Row Column 3

CSS ID parent-three
Add Background Image
Equalize Column Heights
Add overflow:hidden to Custom CSS main element.

Code Module

Margin top:0px Margin bottom:0px
Code Module Code
<style>
     #parent-three:hover .child-three {
        transform: translateX(50%) !important;
      }
</style>

CTA Module

Min Height CTA 100%
Add a button link
CSS Class child-three
CTA Module Padding Right 50%
CTA Set Transform to Translate
Turn off Link XY
Set Desktop TransformX to 100%
Set Hover TransformX to 50%

Share This