Since the new Divi sizing options were released, there are a few tutorials that show you how to create Reveal images using horizontal rollover. In these tutorials, the hidden content was placed vertically. However, in some cases, you may want to create a horizontal reveal. In this tutorial, we’ll show you how to reveal images using Divi’s hover grids and overflow options. Doing this job requires a slightly different approach. We are going to use a row of one column and place all the modules one below the other. In hover, we will transform the column into a horizontal grid.
Reveal images using horizontal rollover
Add a new section
Start by adding a new regular section to the page you are working on.
Add a new row
Column structure
Continue by adding a new row using the column structure:
Default gradient background
Without adding any modules yet, open the row settings and add the following gradient background:
- Color 1: # b1ffc4
- Color 2: #ffffff
- Gradient Type: Radial
- Radial Direction: Center
- Start Position: 28%
- End Position: 28%
Hover over a gradient background
Change the gradient background on hover.
- Color 1: # b1ffc4
- Color 2: #ffffff
- Gradient Type: Radial
- Radial direction: left
- Start Position: 5%
- End Position: 5%
Spacing
Go to the spacing settings and then change the padding and margin values.
- Top Padding: 0px
- Bottom padding: 0px
- Top margin: 50px
- Bottom margin: 50px
Default border
Add a border-radius of 50 pixels in the upper right and lower right corners.
Hover Border
Bring the corners back to “0px” while hovering.
Default shadow
Then add a subtle box-shadow using the following settings:
- Box Shadow Blur Force: 50px
- Shadow color: rgba (0,0,0,0.09)
Hover Box Shadow
Remove the shadow from the box on hover by changing the shadow color to a fully transparent color.
- Shadow color: rgba (0,0,0,0)
Add a text module to a column
Add H2 content
It’s time to start adding modules, starting with a text module. Enter the H2 content of your choice.
H2 text parameters
Switch to the Design tab and change the H2 text settings accordingly:
- Title 2 Police: Acme
- Heading 2 Font style: underlined
- Heading 2 Underline color: # 00ff3f
- Heading 2 Text color: # 000000
- Heading 2 Text Size: 3vw
Spacing
Then add custom padding values.
- Best padding: 6vw
- Bottom padding: 7vw
- Left Padding: 2vw
Add image module to column
Upload Image
The second module we need in this column is an image module. Upload a landscape image of your choice.
Lightbox
Activate the lightbox option in the link settings then.
Sizing
And force full width on the image in sizing settings. This will ensure that the image remains sensitive at all screen sizes.
- Force Fullwidth: Yes
Clone Image Module twice
Once you have completed the first image module, you can copy it twice.
Change Images
Change the images in the two duplicates. Make sure the images you upload are the same size as the first image.
Add the rollover effect to the row
Sizing
Now that we’ve completed the basic row and pod settings, it’s time to create the hover effect! We’ll start by changing the height and width of the row and hide the overflows. Open the row sizing settings and make the following changes:
- Use custom gutter width: Yes
- Gutter width: 1
- Width: 20%
- Maximum width: 100%
- Height: 15.9vw
Hovering flight
Reduce the width to “100%” while hovering. This will allow the images to display after the line has hovered.
- Width: 100%
Visibility
Go to the next advanced tab and hide the overflows. This will ensure that images are hidden before visitors hover (desktop) or click (tablet/mobile) on the text module.
- Horizontal overflow: hidden
- Vertical overflow: hidden
Transitions
We also change the duration of the transition in the transition settings.
- Transition duration: 0ms
The main column hover element
To create a hover grid, we’ll open the column settings, go to the Advanced options tab, and place the following lines of CSS code in the main hover element.
Read more: How to create borders with backgrounds on Divi
Clone row twice
Once you have completed the first row, you can clone it as many times as you want. For this particular design example, we clone the row twice.
Modify the gradient background of line n ° 1
Change the color of the first gradient of the background of the gradient of the second line.
- Color 1: # ffdc96
Change the gradient background of line # 2 Do the same for the third row. Color 1: # b7c7ff Change the copy of the text module and the underline color of the two duplicates
Continue by changing the underline color of the duplicate text module with the copy and you’re done!
- Underline color # 1: # ffaa00
- Underline color # 2: # 0037ff
Final thoughts to Reveal images using horizontal rollover.
In this tutorial, we’ve shown you how to display images in horizontal rollover grids using Divi’s overflow options. The images were revealed when hovered over the desktop and clicked on a tablet/phone. Although we have revealed images, you can reveal whatever content you want by changing the settings in the generator. We hope this tutorial inspires you to create your alternative hover grid designs!
For website maintenance service contact us.