Decorating Your Page with Transforming Shapes on Hover with Divi

April 17, 2019

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi Theme Builder Layout

Example #2

decorating-your-page-with-transforming-shapes-on-hover-with-divi-1 Theme Builder Layout

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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi Theme Builder Layout

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;

decorating-your-page-with-transforming-shapes-on-hover-with-divi-1 Theme Builder Layout

Add New Row

Column Structure

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi-2 Theme Builder Layout

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi-3 Theme Builder Layout

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.

decorating-your-page-with-transforming-shapes-on-hover-with-divi-4 Theme Builder Layout

Default Background Color

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

  • Background Color: #6a00ff

decorating-your-page-with-transforming-shapes-on-hover-with-divi-5 Theme Builder Layout

Hover Background Color

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

  • Background Color: #ffa216

decorating-your-page-with-transforming-shapes-on-hover-with-divi-6 Theme Builder Layout

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%

decorating-your-page-with-transforming-shapes-on-hover-with-divi-7 Theme Builder Layout

Sizing

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

  • Force Fullwidth: Yes

decorating-your-page-with-transforming-shapes-on-hover-with-divi-8 Theme Builder Layout

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)

decorating-your-page-with-transforming-shapes-on-hover-with-divi-9 Theme Builder Layout

Default Transform Rotate

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

  • Center: 359deg

decorating-your-page-with-transforming-shapes-on-hover-with-divi-10 Theme Builder Layout

Hover Transform Rotate

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

  • Left: 250deg
  • Center: 320deg

decorating-your-page-with-transforming-shapes-on-hover-with-divi-11 Theme Builder Layout

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.

decorating-your-page-with-transforming-shapes-on-hover-with-divi-12 Theme Builder Layout

Transitions

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

  • Transition Duration: 950ms

decorating-your-page-with-transforming-shapes-on-hover-with-divi-13 Theme Builder Layout

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.

decorating-your-page-with-transforming-shapes-on-hover-with-divi-14 Theme Builder Layout

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi-15 Theme Builder Layout

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi-16 Theme Builder Layout

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.

decorating-your-page-with-transforming-shapes-on-hover-with-divi-17 Theme Builder Layout

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi-18 Theme Builder Layout

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)

decorating-your-page-with-transforming-shapes-on-hover-with-divi-19 Theme Builder Layout

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi-20 Theme Builder Layout

Color

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

  • Color: #ffffff

decorating-your-page-with-transforming-shapes-on-hover-with-divi-21 Theme Builder Layout

Sizing

Modify the sizing values as well.

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi-22 Theme Builder Layout

Spacing

And add some custom bottom padding.

  • Bottom Margin: 5vw

decorating-your-page-with-transforming-shapes-on-hover-with-divi-23 Theme Builder Layout

Clone Entire Section

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi-24 Theme Builder Layout

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.

decorating-your-page-with-transforming-shapes-on-hover-with-divi-25 Theme Builder Layout

Change Default Background Color

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

  • Background Color: #2d007c

decorating-your-page-with-transforming-shapes-on-hover-with-divi-26 Theme Builder Layout

Change Hover Background Color

Change the hover background color as well.

  • Background Color: #008089

decorating-your-page-with-transforming-shapes-on-hover-with-divi-27 Theme Builder Layout

Change Gradient Background

Along with the gradient background.

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi-28 Theme Builder Layout

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi-29 Theme Builder Layout

Change Hover Transform Rotate Settings

Modify those same values on hover.

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

decorating-your-page-with-transforming-shapes-on-hover-with-divi-30 Theme Builder Layout

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.

decorating-your-page-with-transforming-shapes-on-hover-with-divi-31 Theme Builder Layout

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.

decorating-your-page-with-transforming-shapes-on-hover-with-divi-32 Theme Builder Layout

Preview

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

Example #1

decorating-your-page-with-transforming-shapes-on-hover-with-divi Theme Builder Layout

Example #2

decorating-your-page-with-transforming-shapes-on-hover-with-divi-1 Theme Builder Layout

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!

Share this article:
 




eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

8-divi-layouts-for-bakeries Theme Builder Layout

8 Divi Layouts for Bakeries

Divi is a great choice for creating any type of website for the food industry. One that I find interesting is bakeries. Bakeries are a little unique in the food genre. They not only have food menus like most restaurants, they often provide specialized services for...

how-to-display-highlighted-code-snippets-on-your-wordpress-site Theme Builder Layout

How to Display Highlighted Code Snippets on Your WordPress Site

Just about every technology blogger, content creator, or developer needs to sometimes display highlighted code snippets on their blog. That can be a headache in and of itself. However, highlighting a line or lines within that snippet can also be necessary, and that...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.