reveal images using horizontal rollover

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

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.

  • Open in the viewer: yes

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.

Leave a comment

echo "";