How To Make A Website With WordPress And Divi Theme In 2018 Start Tutorial

How to build an image grid with a rollover

by | Feb 1, 2018 | Divi tutorials | 10 comments

In this tutorial you will be learning on how to create an image grid with a rollover effect. You can follow this step by step guide to accomplish this or you can use the json file and upload this section to your Divi library.

This image grid is created out of blurbs. Each service is made out of 2 blurbs. One is visible and the other one is only visible when you mouse over it.

Step by step guide

Step 1
Download the image pack I used for this tutorial and unzip it. You can use the same image as I did for this tutorial.

If you just want to use this section and not to build it from scratch you can just use the json file in the download pack. You will still need to add the CSS part manually (later in this tutorial).

To upload the file do as follow:

Go to Divi > Divi Library. Click on the import/export options.
Click on Import and upload Image grid with rollover.json.

Now you can use this section on any page with the import from library function.

Step 2
Create a section and use these settings:

Background: Upload the image section_with_overlay
Use Parallax Effect: Yes
Parallax Method: CSS

Step 3
Create a row and choose a 3 column layout and use these settings:

Background: Upload the image row_bg
Use Parallax Effect: Yes
Parallax Method: CSS
Use Custom Width: Yes
Unit: %
Use Custom Gutter Width: Yes
Gutter Width: 1
Custom Padding: 0 0 0 0
CSS Class: blurbs_grid

Step 4
Add a blurb module in the first column and use these settings:

Title: fill in your title in my case Service 1
Background: in the color tab use rgba(0,0,0,0.58)
Title Text Alignment: center
Title Text Size: 26px
Title Text Color: #ffffff
Custom Padding: Top 75px Bottom: 75px
Border Styles: All borders (first option)
Border-Width: 2px
Border-color: #ffffff
CSS Class: blurb_active

Step 5
Add another blurb module under the previous and use these settings:

Title: fill in your title in my case Service 1
Content: see below (replace # with a link)
Background: in the image tab upload service_image_1
Title Text Alignment: center
Title Text Size: 26px
Title Text Color: #ffffff
Title Text Shadow: choose bottom left
Title Text Shadow Color: #000000
Custom Padding: Top 75px Bottom: 75px
Border Styles: All borders (first option)
Border-Width: 2px
Border-color: #ffffff
CSS Class: blurb_hover

Step 6
Copy these two blurbs and place them in the other two columns.

Replace the images and titles

Duplicate this row.

Step 7
Add this CSS code in Divi > Theme options > Custom CSS
I have added some comments in the CSS where you can change the button color.

If you have any questions or suggestions make sure you leave a comment in the comment section below!

Please follow me on Facebook for more free Divi tutorials and layout packs.

10 Comments

  1. Steven

    Thanks! Very cool this! Would it be possible to have a grid of triangles (with three sides of each 60 degr) in stead of the square grid on top of the background image?

    Reply
    • Mark

      That would give a very nice effect. Unfortunately, I would not know how to do that with this grid

      Reply
      • Steven

        Thanks anyway!

        Reply
      • Anton

        The only way I can think of is an SVG with triangle elements. They can be manipulated by (similar) CSS. You could see SVG as an extension for CSS in case you need more complex paths.

        Reply
  2. Paul

    Looks great. Will give it a go.
    I am just getting into flex so a good opportunity.

    Reply
  3. Bryan

    Looks great on my computer, but changing to a tablet device results in the background image repeating itself on the upper row and lower row, instead of reflecting the “full” image of the overlay bg.

    Any suggestions on how to make this design more responsive?

    Thanks!

    Reply
    • Mark

      Hi Bryan,

      That is correct.

      Divi disables parallax images on mobile devices.

      You can try to add this in your custom CSS:

      .et_mobile_device .et_pb_section_parallax .et_pb_parallax_css {
      background-attachment: fixed !important;
      }

      Reply
  4. getcreative

    I love your design and have added it to a demo that I’m working on but for some reason when it gets to your section it doesn’t scroll smooth over it for some reason. Do you have any ideas on what could cause that?

    Thanks in advance

    Reply
    • Mark

      Hi,

      Could you provide me a link then I’ll have a look at it. You can also mail it to me ([email protected])

      Reply
  5. Chook

    Hi Mark, This Looks Great!
    Thanks.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Elagant Themes
Siteground
Free Divi layouts
Divi tutorials

36 Shares
Share36
+1
Tweet
Share
Buffer