Since the new sizing options of Divi have been released, there are a few tutorials that show you how to create hover reveals. In these tutorials, the contents masked 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 the hover grids and overflow options. Divi. 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. On hover, we'll turn the column into a horizontal grid. You can also download the JSON file for free!
Let's go.
Preview
Before we dive into the tutorial, let's take a quick look at how we look at different screen sizes.
Let's start recreating!
Add a new section
Start by adding a new regular section to the page you are working on.
Add a new line
Column structure
Continue adding a new row using the following column structure:
Default gradient background
Without adding more modules, open the line parameters and add the following gradient background:
- 1 color: #b1ffc4
- 2 color: #ffffff
- Gradient type: Radial
- Radial Direction: Center
- Start Position: 28%
- End Position: 28%
Flying over the gradient background
Change the gradient background by hovering.
- 1 color: #b1ffc4
- 2 color: #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
- Upper 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 to "0px" hovering.
Default shadow
Then add a subtle box shadow using the following parameters:
- Box Shadow Blur Force: 50px
- Shadow color: rgba (0,0,0,0.09)
Hover Box Shadow
Remove the shadow from the box when flying over, replacing the color of the shadow with a completely 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 contents H2 of your choice.
H2 text settings
Switch to the Design tab and change the H2 text settings accordingly:
- Title 2 Font: Acme
- Title 2 Font Style: Underline
- Title 2 Underline color: #00ff3f
- Title 2 Text color: #000000
- Title 2 Text Size: 3vw
Spacing
Then add custom fill 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.
Light box
Activate the lightbox option in the link settings then.
- Open in the viewer: yes
sizing
And force full width on the image in the 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 mod 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 a custom gutter width: Yes
- Gutter width: 1
- Width: 20%
- Maximum width: 100%
- Height: 15.9vw
Hover
Reduce the width to "100%" while hovering. This will allow the images to display after the row is hovered.
- Width: 100%
Visibility
Switch to the next advanced tab and hide the overflows. This will ensure that the images are masked before the visiteurs hover (desktop) or click (tablet/mobile) on the text module.
- Horizontal overflow: hidden
- Vertical overflow: hidden
Transitions
We are also changing the duration of the transition in the transition parameters.
- Duration of the transition: 0ms
Main column rollover 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:
display: grid; grid-template-columns: 20% 25% 25% 25%; grid-gap: 10px;
Clone the line 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 1
Change the color of the first gradient in the gradient background of the second line.
- 1 color: # ffdc96
Change the gradient background of line 2
Do the same for the third row.
- 1 color: # b7c7ff
Change the copy of the text module and the underline color of the two duplicates
Continue by changing the underline color of the duplicates of the text module with the copy and you are done!
- Underlined color # 1: # ffaa00
- Underlined color # 2: # 0037ff
Latest Thoughts
In this tutorial, we showed you how to display images in horizontal hover grids using the overflow options. Divi. Images were revealed when hovered on desktop and clicked on tablet/phone. Although we have revealed images, you can reveal the contents of your choice by modifying the parameters in the generator. We hope this tutorial inspires you to create your own alternative hover grid designs! If you have any questions or suggestions, be sure to leave a comment in the comments section below!
