Overlapping Animated Modules in Divi

by

In Part 1 of this tutorial, we’ll use some basic CSS to create the start on our overlapping animated modules in any given row. As we explore further in Part 2, we’ll dive into using the magic of CSS transitions, along with some neat jQuery (JavaScript), to have the modules line back up in their “proper” order when you hover over the section that contains the modules.

This tutorial is focused on desktop widths greater than 980px, with the main reason being there is no “hover” on mobile devices.  But if you play around a bit, you could come up with some of your own mobile designs based on this as well!  It should work with any WordPress theme using the Divi Builder, including the Divi and Extra themes from Elegant Themes.

Sneak Preview – Part 1

While this tutorial could actually work with quite a few of the modules available in the Divi Builder, we’ll go with image modules here since they are the most intuitive use of the idea.

This is what our row of images will look like when we are through with part 1. Note that you can still click on each one to open it up in a lightbox.

Getting Started with Part 1

Within an existing page/post (or add a new one!), create a standard section with a 1/3 1/3 1/3 column row. You will want to assign the section a overlapped-modules class in the section’s “Custom CSS” tab.

Then, go ahead and insert an image module into each of the three columns. For each image module, let’s set the image alignment to “Center” and set “Open In Lightbox” to “Yes”. We’ll also assign a CSS Class to each image module.

  • Left image:
    module-left
  • Middle image:
    module-middle
  • Right image:
    module-right

Each module setting should look like it does below, except for “module-middle” and “module-right” for the middle and right image modules. Click to expand.

Adding CSS

Before we start this part, let’s keep in mind that the CSS values below will probably need to be adjusted depending on your site and the size of your images.  For this tutorial, we are using images approximately 500px by 300px, and the site is using a boxed layout. There is also no requirement for using a 1/3 1/3 1/3 layout – we are using that for the sake of simplicity here.

OK then! Let’s add some CSS! If you are using Divi 2.7 or greater, the best way to do this is to add it to the Custom CSS on the page itself. This means that we won’t add bulk to any other page. Click on the hamburger menu on the Divi Builder header bar to access the Divi Builder Settings. Put the CSS into the Custom CSS box and hit “Save”.

 

If you are using an earlier version of Divi, you will need to add this to your child theme’s style.css file.

As we mentioned above, we’re going to focus on desktop widths. Therefore our CSS will include a media query.  This allows us to leave the modules alone when being viewed on a mobile device.

@media only screen and ( min-width: 981px ) {
  .module-left {
    width: 120%;
    margin-left: 20%;
  }
  .module-middle {
    margin-top: 50%;
  }
  .module-right {
    width: 155%;
    margin-left: -62%;
    margin-top: -10%;
  }
}

Having done that, you should now see your image modules laid out like you saw in the Sneak Preview above. Not too bad.

Going Ahead with Part 2

If that’s all you really wanted out of this tutorial, then you are done!  You can move on to something else.

However, now that we have our  overlapping image modules, wouldn’t it be neat if they could fall back into their proper styling temporarily when you hover over the section that contains them?  If you think so, then read on!

Sneak Preview – Part 2

After you have finished this tutorial, your new overlapping modules section will be more like this: (Go ahead and hover – it’s OK!)

 

New CSS

The next thing we need to do is add additional CSS to get our modules to look like they “originally” did when we hover over the section that contains those modules.  This isn’t too bad; we will simply replace the CSS we used above with new stuff that includes some additional CSS for reverting back to the native styling on hover, along with some transitions to keep things looking smooth rather than jumpy.

Here is the new CSS. It should entirely replace what you did above.

@media only screen and ( min-width: 981px ) {
  .module-left, .module-middle, .module-right {
    /* Set a delay of 8/10 of a second on width and margin transitions */
    transition: width 0.8s ease-in-out, margin-left 0.8s ease-in-out, margin-top 0.8s ease-in-out;
  }
  .module-left {
    width: 120%;
    margin-left: 20%;
  }
  .module-middle {
    margin-top: 50%;
  }
  .module-right {
    width: 155%;
    margin-left: -62%;
    margin-top: -10%;
  }
 
  .module-left.hovering, .module-middle.hovering, .module-right.hovering {
    transition: width 0.8s ease-in-out, margin-left 0.8s ease-in-out, margin-top 0.8s ease-in-out;
    /* Set width, margin-left and margin-top to their initial settings */
    width: 100%;
    margin-left: initial;
    margin-top: initial;
	z-index: initial;
  }
}

Adding Some jQuery

If you’ve put the new CSS into your child theme, saved it and tested it, you might have noticed… nothing happened! Why is that?

We haven’t yet told the page what to do when we hover over that section!  We’ve added all the styling, but the classes have not yet changed. This is where jQuery (a CSS-friendly form of JavaScript) comes into play. We need to use jQuery to activate the new “hovering” class so that our new CSS will kick in when we hover over our overlapping module section.

What we’ll do here is take advantage of the Divi Builder “Code Module” so that we have code only on this page, and it does not add weight to any other pages.

At the end of your page/post, create a new section with a 1-column layout and put a Code Module into the column. Add the following code to the Code Module:

<script>
var $ = jQuery; 
$( document ).ready( function() { 
	$(".overlapped-modules").hover( function() { 
		$(".module-left").addClass("hovering"); 
		$(".module-middle").addClass("hovering"); 
		$(".module-right").addClass("hovering"); 
	}, function() { 
		$(".module-left").removeClass("hovering"); 
		$(".module-middle").removeClass("hovering"); 
		$(".module-right").removeClass("hovering"); 
	} ); 
});
</script>

Once you have saved the code module, all of the formatting will disappear, but that’s OK. This script is simply saying “When we hover over that section, add a .hovering class to each module so that CSS will cause the modules to go back to the native styling. When we mouse out, go back to the overlapped styling.”

Final Thoughts

As we mentioned at the beginning, you could conceivably use this type of thing for several different kinds of modules. Do you have any ideas about that? Have you tried something different?

Leave us some comments if so, or if you have any questions about this tutorial!

14 Comments
    • Terry Hale

      Thanks Dehn. 🙂

      Reply
    • Terry Hale

      Best wishes. 🙂

      Reply
  1. Igor

    Thank you Terry!

    Nice effect. We will try to implement it on clients’ projects.

    Regards,
    Igor

    Reply
    • Terry Hale

      Thanks! Let us know how it goes!

      Reply
  2. Keith

    Thanks, just tried it and working great. The only thing you don’t mention is that you need to give the section a custom css class of “overlapped-modules” otherwise the jquery function won’t kick-in.

    Reply
    • Terry Hale

      Awesome, nice catch Keith! I actually had that in there but accidentally deleted it and never put it back. It has been added. Thanks man, you rock! 🙂

      Reply
  3. Mark

    Hi Terry,

    There seems to be an error with the images. They won’t seem to load. Can you please verify the images that you used here are still on the correct url?

    Reply
    • Terry Hale

      Hey Mark, thanks for the heads up. We have been making minor corrections to the site in a few places after our rebranding a few days ago. I’m on my phone right now, but I’ll get this one back in shape when I get back home. Much appreciated! 🙂

      Reply
  4. awert

    hi, I have been trying to overlap a text(left module) and image(right module) modules in the same row. The image always comes on top of the text which makes text unreadable. I even tried changing the order of css but to no avail. Can u help me with this!

    Reply
    • Terry Hale

      Hey awert,

      Since the left module comes first in the DOM (the HTML structure), it will be overlaid by the next module in the same row.

      To overcome this, you can assign a higher z-index to the first column. Go into your row settings, then click the “Custom CSS” tab. Look for the “Column 1 Main Element:” section, then put the following there:

      z-index: 10;

      Hope this helps, and thanks for reading! 🙂

      Reply
  5. justmiro

    Hi Terry

    The effect is great. I am planning to use it on my home page. Only problem is what you do with css modul? It’s still visible on page as a white empty square. Any idea how to make it “invisible”?

    Reply
    • Terry Hale

      Hey justmiro,

      I’m not sure I understand completely what you’re explaining. I guess I don’t know what you mean by “css module”. Do you have a link you can share?

      Reply

Submit a Comment

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