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
2. Add a Code Module to Column 1 and enter the following code
Enter Code
//Enter this code into code module
<style>
#parent-one:hover .child-one {
transform: translateX(-50%) !important;
}
</style>
3. Set Code Module margin top and bottom to zero
4. Add a background Image to Column 1 and equalise column heights
Equalize Column Heights
5. Give Column 1 the CSS ID of parent-one
6. Insert a CTA module in Column 1
7. Set Min Height of CTA module to 100% and add a button link
Set Min Height
Add Button Link
8. Give CTA Module a CSS Class of child-one
To Create a Left Slide In
Close All
Set The CTA Module Left Padding to 50%
CTA Module Set Transform to Translate
Turn off Link XY Transform
Set DeskTop TransformX to -100% and Hover TransformX to -50%
Add to Column 1 Custom CSS main element overflow:hidden;
The CTA Transitions can be used to set the speed curve, delay and speed of animation.
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%