Decorating Your Page with Transforming Shapes on Hover with Divi

Posted on April 17, 2019 by in Divi Resources | 9 comments

Decorating Your Page with Transforming Shapes on Hover with Divi

Creating interactive design is something that immediately helps elevate the look and feel of any website. With Divi’s built-in options, you can take many turns and create effects that are truly unique to your website.

In this post, we’re going to show you how to decorate your page with transforming shapes on hover. The result we’ll obtain focuses on the desktop experience but keeps a neat and user-friendly design on smaller screen sizes as well.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the two examples we’ll recreate from scratch.

Example #1

transforming shapes

Example #2

transforming shapes

Download the Shaped Image Overlays

To lay your hands on the shaped image overlays that are used throughout this tutorial, you will need to download them using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Let’s Start Creating!

Add New Section

Background Color

Stary by creating a new page or opening an existing one. Add a regular section to it, open the section settings and add an entirely black background color.

  • Background Color: #000000

transforming shapes

Overflow

To cut off the shaped image overlay later on this tutorial, we’re going to make sure nothing surpasses the section container by adding a single line of CSS code to the main element of the section.

overflow: hidden;

transforming shapes

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

transforming shapes

Sizing

Without adding any modules yet, open the row settings and allow the row to take up the entire width of the screen.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

transforming shapes

Add Image Module to Row

Upload Shaped Image Overlay

Time to start adding modules! The first module we need is an Image Module. Upload the first shaped image overlay which you can find in the folder you’ve downloaded. You can find more shaped image overlays by going to this post, downloading the files, opening the Illustrator file and customizing them to your needs. If you, however, just want to recreate the examples that were shared in the preview of this post, the folder you’ve downloaded at the beginning of this post will do.

transforming shapes

Default Background Color

Go to the background settings of the Image Module and add the following default background color:

  • Background Color: #6a00ff

transforming shapes

Hover Background Color

Change the background color on hover using the following color code:

  • Background Color: #ffa216

transforming shapes

Gradient Background

Continue by adding a gradient background to the Image Module as well.

  • Color 1: #ff2841
  • Color 2: rgba(255,255,255,0)
  • Gradient Direction: 168deg
  • End Position: 68%

transforming shapes

Sizing

Move on to the design tab and enable the ‘Force Fullwidth’ option.

  • Force Fullwidth: Yes

transforming shapes

Spacing

We’re also hiding a part of the shaped image overlay by adding some negative top margin to the spacing settings. You’ll notice that the module won’t surpass the section container thanks to that one line of CSS code we’ve added to the section at the beginning of the tutorial.

  • Top Margin: -22vw (Desktop & Tablet), 0vw (Phone)

transforming shapes

Default Transform Rotate

We can now start transforming the module! Add the following default transform rotate settings to the Image Module:

  • Center: 359deg

transforming shapes

Hover Transform Rotate

And change these values on hover to create a transforming shape.

  • Left: 250deg
  • Center: 320deg

transforming shapes

CSS ID

When hovering the Image Module, the shaped image overlay will overlap all other modules that are on top of it. To avoid that, we’ll need to modify the module’s z-index on hover later on the post. To accomplish that, you’ll need to add a custom CSS class to the Image Module.

transforming shapes

Transitions

Last but not least, we’re creating a smooth transition by increasing the transition duration in the advanced tab.

  • Transition Duration: 950ms

transforming shapes

Add Text Module #1 to Row

Add H2 Content

The next module we need is a Text Module. Add some H2 content of your choice.

transforming shapes

H2 Text Settings

Then, go to the design tab and modify the H2 text settings.

  • Heading 2 Font: Didact Gothic
  • Heading 2 Font Weight: Bold
  • Heading 2 Text Alignment: Center
  • Heading 2 Text Color: #ffffff
  • Heading 2 Text Size: 7vw
  • Heading 2 Line Height: 0.9em

transforming shapes

Spacing

Create an overlap between this module and the Image Module using some custom margin values.

  • Top Margin: -68vw
  • Bottom Margin: 8vw
  • Left Margin: 29vw
  • Right Margin: 29vw

transforming shapes

Add Text Module #2 to Row

Add Content

Add another Text Module right below the previous one and enter some paragraph content of your choice.

transforming shapes

Text Settings

Then, go to the design tab and modify the text settings.

  • Text Font: Open Sans
  • Text Color: #ffffff
  • Text Size: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
  • Text Line Height: 1.8em
  • Text Orientation: Center

transforming shapes

Spacing

Add some custom margin values as well.

  • Bottom Margin: 2vw (Desktop), 4vw (Tablet), 6vw (Phone)
  • Left Margin: 30vw (Desktop), 10vw (Tablet & Phone)
  • Right Margin: 30vw (Desktop), 10vw (Tablet & Phone)

transforming shapes

Add Divider Module to Row

Visibility

The next and last module we need is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

transforming shapes

Color

Then, go to the design tab and change the color of the divider.

  • Color: #ffffff

transforming shapes

Sizing

Modify the sizing values as well.

  • Divider Weight: 7px
  • Width: 15%
  • Module Alignment: Center

transforming shapes

Spacing

And add some custom bottom padding.

  • Bottom Margin: 5vw

transforming shapes

Clone Entire Section

On to the second example! Clone the section you’ve just completed.

transforming shapes

Change Image Module

Upload New Shaped Image Overlay

There are a few changes we need to make, starting with the shaped image overlay. Go ahead and upload the second shaped image overlay which you can find in the folder you’ve downloaded at the beginning of this post.

transforming shapes

Change Default Background Color

Then, go to the Image Module’s background settings and change the default background color.

  • Background Color: #2d007c

transforming shapes

Change Hover Background Color

Change the hover background color as well.

  • Background Color: #008089

transforming shapes

Change Gradient Background

Along with the gradient background.

  • Color 1: #0c0c0c
  • Color 2: rgba(255,255,255,0)
  • Gradient Direction: 168deg
  • End Position: 68%

transforming shapes

Change Default Transform Rotate Settings

We’re also changing the transform effect. Go to the transform settings and change the default transform rotate values.

  • Left: 270deg
  • Center: 359deg

transforming shapes

Change Hover Transform Rotate Settings

Modify those same values on hover.

  • Left: 192deg
  • Center: 280deg
  • Right: 15deg

transforming shapes

Add Custom Code to Page

Open Page Settings

Now, the last part of this post makes sure that the transforming shape remains below all the other modules when it is being hovered. Open the page settings.

transforming shapes

Add CSS Code

Then go to the advanced tab and add the following CSS code.

.hover-state:hover {
z-index: -99; }

We’re using the CSS Class we’ve assigned to the sections throughout the tutorial.

transforming shapes

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome.

Example #1

transforming shapes

Example #2

transforming shapes

Final Thoughts

In this post, we’ve shown you how to get creative with Divi’s transform options. More specifically, we’ve used Image Modules with shaped image overlays to create a transforming background shape. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Premade Layouts

Check Out These Related Posts

9 Comments

  1. Nice. I like it.

    thanks for sharing…

  2. Great idea! Way to go!

  3. Hello,
    Another good idea.
    I’ll test that right now.
    Thanks for the file sharing

  4. Looks nice, will give it a try, I just need a simple hovering shape. Also will it affect the loading speed in anyway?

    • no

  5. Nice! An idea: Since you use overflow:hidden in every other tutorial now, why not add it as an option (checkbox) in the Divi Builder UI?

    It’s kind of hard to keep track on which modules that have custom css “hidden” under the Advanced tab. And it would make the claim on the elegantthemes.com homepage more credible: “Divi is more than just a theme, it’s a website building framework that makes it possible to design beautiful websites without ever touching a single line of code…

  6. Can I use it on mobile?

  7. Thanks for the great tutorial on the transform functions.

  8. Great idea!
    Where can I download this?

Join To Download Today

Pin It on Pinterest